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Welcome to the New Horizons training team. 

Our goal is to provide you with the best computer training available and we 
know exactly what that takes. Our corporate heritage is based in training. In fact, 
we use our Student Manuals every day, in classes just like yours, so you can be 
confident that the material has been tested and proven to be effective. 

If you have any suggestions on how we can improve our products or services, 
please contact us. 



ABOUT THIS COURSE 



In the Flash MX - Level 1 course, you learned the introductory skills to create 
basic animations and simple navigation buttons. In this course 
with symbols and instances, create extensive Timelines with independent anima- 
tions, build more complex navigation controls, work with sound, and optimize 
your movies for viewing by your intended audience. 



Course Prerequisites 

To ensure your success, you should have familiarity 
system. We also recommend you first take the folk 
have equivalent knowledge: 

• Flash MX - Level 1 



Course Objectives 

When you're done working your way tl 






the Windows operating 
Vew Horizons course or/r? A> 



ook, you'll be 



as in building a F 
s, and manage sy: 




sh movie, iden- 
within a 






nd create frame 



Identify the advantages that 
tify and create the three tyr 
movie using the Library p; 

Use scenes to c 
labels to mark 

Add advanced 
(including remc 
ensure smooth L 

Import sounds into a project, work with sound properties, and edit sounds. 

Test a n^ve^hrle^simulating a slow connection, identify factors that 
incrG^e^airte^e's^size and download time, and publish a movie using many 
of Flash's numerous publishing options. 



large complex Time 
ur Timeline. 

; and interactive 
expanding me 
;r movie files ov 



nts to a Flash movie 
create preloaders to 
low connections. 
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COURSE SETUP INFORMATION 



Hardware and Software Requirements 

To run this course, you will need: 

An Intel Pentium 200 MHz or equivalent processor 
Windows 98 SE, Me, NT4, 2000, or XP. 

64 MB of random-access memory (128 MB recommended) plus a minimum 
of 85 MB of available disk space (64 recon^fendei^N 

1024 x 768, 16-bit (thousands of colors) cxjlp/iii^pray or better 

Either Microsoft Internet Explorer 5.0 and/or Netscape Navigator 4.0 (or 
later version). 

Macromedia Flash MX. 

A CD-ROM drive. 



Class Requirements 

In order for the class to run 




the procedures described below. 



Install the course data files that^cor/fe with this book. Open the contents of 
the CD-ROM through My Computer, and open the Jfon(4&6 folder. Inside 
this folder, you wiJOk(d three separate folders. C<3py^the Flash Level 2 Data 
folder to your C:\ drive. This folder contains all^h^4ata material you will 



need for the c 



The files in tb 
you shouliQk) 

\:r»>i wit 





ead-only format. Therefore, 



vel 2 Data folder 
urn^ff the read-only option so that the files can be modi- 

A/ 



fled as y^jtkwork with them. Open the Flash Level 2 Data folder you just 
copied^t^youis^omputer's hard disk^^raxhoose Edit— >Select All to select 
all the icons within the folder. Than choose File— Properties. In the Proper- 
ties dialog box, uncheck the Read Only checkbox, then click OK. Deselect 
uies^eleQted^icons, and repeat these steps to turn off the read only option for 
the contents of each subfolder within the Flash Level 2 Data folder. You are 
iy to begin working with the data. 

ed features of Flash MX will be available for 
nstall from the software installation CD. 




to ensure that 
this course, run a st; 




The Flash Player plug-in for Web browsers is required to display some of 
the content generated during this course in a Web browser. You can down- 
load the Flash Player plug-in from the Macromedia Web site. Go to http:// 
www.macromcdia.com, and follow the instructions to download and install 
the latest version of the Flash Player. 

This course specifies the use of the font Arial. If this font is not installed, 
the documents the student works on will not display as intended. Make sure 
the font Arial is installed on the computer. 

This course will run most smoothly if your monitor resolution is set to at 
least 1024 x 768 pixels per inch. 
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7. Using the Provided Stage Data: On the course CD, the Lesson folders in the 
Additional Data folder contain all the course documents and data, completed 
up to the lesson indicated by the folder name. This allows you to begin at 
any lesson in this manual using the correct data that includes all files that 
would have been created from previous lessons. It also allows you to begin a 
new lesson with fresh, "correct" data, if so desired. 

For example, if you would like to begin this manual at Lesson 4, you should 
open the Lesson 4 folder in the Additional Data folder in the 078_166 folder 
on the course CD, and copy the Flash Level 2 Data folder from the Lesson 4 
folder to your computer's hard disk (first remove or change the name of any 
existing Flash Level 2 Data folder on your hard disk). All the files you'll /v 
need to complete the rest of the course are contained in the new folder. 

However, the files in the new Flash Level 2 Data folder are in read-onl} 
format. Therefore, you should now open the Flash Level 2 Data fold^rVr, 
just copied to your computer's hard disk, and choose Edit— >Select All to 
select all the icons within the folder. Then choose File— Properties. In the 
Properties dialog box, uncheck the Read Only checkbox, then click OK. 
Repeat these steps to turn off the read only option for the contents or each 
subfolder within the Flash Level 2 Data folder. The previo^^epsvaresanly T 
necessary if you plan to begin this manual at a lesson other tharrLesSea-t: If 
you plan to work straight through the entire manual, then the previous r,teps 
are unnecessary. 




HOW TO USE THIS BOOK 



You can use this book as a learning guide, a revi< 



Asa Learning Guide 






a reference. 





Each lesson covers one broad topic or sec of related topics. Lessons are arranged 
in order of increasing proficiency with Flash MX; skills you acquire in^je^esson 
are used and developed in subsequenTie^sonsTToy this reason, you should work 
through the lessons in sequence. 

We organized each lesson into explanatory topics and step-by-s^^a^jtivities. Top- 
ics provide the theory you neefl tb rh^gter/'Yas/i MX, activities allow you to apply 
this theory to practical hands-on examples. 

You get to try out each Srew^skiirbqJ? specially prepared sample file. This saves 
you typing time and allows^^uteT^oncentrate on the/technique at hand. Through 
the use of sample files, hands-on activities, illustrations that give you feedback at 
crucial steps, and supporting background information, thrs book provides you 
with the foundation \tas$^Bicwre, to learn Flash MX quickly and easily. 



Asa 

Any mei 
ing to inves 
reviewing the 




tion is only as effective as the time and effort you are will- 
br this reason, we encourage you to spend some time 
s more challenging topics and activities. 
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ABOUT THIS 
COURSE 



As a Reference 



You can use the Concepts sections in this book as a first source for definitions of 
terms, background information on given topics, and summaries of procedures. 
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Icons Serve As Cues: 



Throughout the book, you will find icons representing 
various kinds of information. These icons serve as an 
"at-a-glance" reminder of their associated text. 



Topic: 

Represents the beginning 
of a topic 



Task: 

Represents the beginning 
of a task 



Student Note: 

A margin note that 
highlights information 
for students 

QuickTip: 

A margin note that 
represents a tip, sho^t&ik \^ 
or additional way to O0^\yv 
something 

Web Tip: An 

A margin n 
you to a wetreift 
might fmij^dd* 

^tructor edition, 
note refers to a' 
fthat the instructor can 
lesson 




Check Yoor Skills: 

Represent 
Skills prai 






Apply Your Knowledge: 

Represents an Apply Your 
aeth ity 






lossary Term: 

margin note that represents 
^definition. Thi^rairhition 
also appears ir^t^^fossary 

Warning: /Pp^ 

A margijHUjt^that represents 
a cautjon;tttfs note typically 
ifi&s-^/solution to a 
ial problem 




instructor Note: 

A margin note in the Instructor's 

tion that gives tips for 
teaching the class 



Additional Instructor Note: 

A margin note in the Instructor's 
Edition that refers the instructor 
to more information in the back 
of the book 



About This Course 



Symbols and Instances 




Overview 



In this lesson, you will work with symbols as the building blocks of Flash 
projects. You will use the three types of symbols available in Flash, and will (y'/v. 
identify which symbol type is the most appropriate for a particular situation. 
You will then learn to manage symbols and instances using the Library, and 
you will use symbols as the basis for other symbols. ^/s^\^^^ 





Objectives 



To learn to work with symbols and instances effectively, you wii" 




1A 



Identify the advantages that symbol use has in building a Flas 
movie, and identify the three types of symbols. 



You will see how symbols can help you to build projects quickly and 
efficiently, and how they save file space. In addition, you will learn the 
similarities and differences between graphic, button, and movie clip sym- 
bols, and identify when to use each type. 




IB 




1C 



Identify the situations where you would use a graphic symbol, and to 
convert an object to a graphic symbols \^ 

You will learn when choosing the graphic symbol type is appropriate 
when building your movie. In addition, you will use the Convert to Sym- 
bol command to convert an existing graphic object to a graphic symbol. 

Create a movie clip symbo!, and identify how it behaves in the main 
movie Timeline. 

You will create a movie clip symbol to build an animation that is inde- 
pendent of the main movie Timeline, and you will combine multiple 
movie clip symbols 10 create a more complex anima 



ID Create button symbols using static and animated image states. 

You will creace button symbols using static images. You will also create 
buttons containing animated image states using independent animations 
within movievcli^i^r}bols. 

IE Create and manage symbols within a movie. 

u will create instances from symbols, use the Library to manage sym- 
bols, and combine symbols into more complex symbols. 



ata Files 

'ater Scene.fla 
Spiral.fla 
Preloader. fla 

Lesson Time 

2 hours 
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symbol: 

A "building block" of Flash 
content. Symbols are the 
master objects within a Flash 
movie. The three types are 
graphic, movie clip, and 
button symbols. 



graphic symbol: 

A symbol best used for static 
images and animations that 
are dependent on the main 
movie Timeline. 




What is a Symbol? 

When you draw a simple or complex object in Flash using Flash's drawing tools, 
that object is more or less decorative in nature. It appears witbin / yb>ir s Fl&sh 
project, but you can't do much with it. In order to add motion to an object, or to 
have it act as an interactive element within the movie, that object needs to be a 
symbol. f /~X \ 

There are several distinct differences between symbols and standard objects in a 
Flash movie. First, a symbol does not interact with other shapes when it is on the 
same layer. So, when symbols on the same layer overlap with other objects or 
symbols, they do not merge or cut into other objects*. 

Second, symbols can be animated. In order to add motion to an object, that object 
needs to be a symbol. Remember that y<jucan't perform a shape tween (morph) 
between one symbol and another. Howe^ra^rTbcdeVxo perform a motion tween, 
you must use a symbol. 

Finally, symbols are the building blocks for your project. You can use a single 
symbol multiple times in a raovie without ^adding significantly to the movie's 
size. A movie with one symbol used three times will have a smaller file size that 
a movie containing an original objecNifid/two duplicates of the original object. In 
addition, you can combine symbols together when building more complex 
symbols. For example, yofi^an use a graphic symbol's sMp^s the basis for one 
or several of the button states in a button symbol. The more you use symbols, the 
smaller your files will be^ar^^•the easier it is to mak^toiek changes to your 
content. 




sh: oraphi 



Types of Symboi 

There are/threj^ typeVdr" symbols in FlasKS^jphic symbols, movie clip symbols, 
and buttron (symbols. Each type of sym&£)l^^ptimized for certain uses. 




Graphic Symbols 

(^lpM^s\mpols have their own ceparate Timeline, similar to the main movie 
Timeline. Just like the regular/fi^ie y Timeline, a graphic symbol's Timeline can 
include multiple layers. 





ere are several important things to remember about graphic symbols. First, 
graphic symbols cannot contain button symbols or sounds. In addition, they can- 
e made to be interactive. Finally, a graphic symbol's Timeline is tied to the 
main Timeline. If fftETftawi movie stops playing, the graphic symbol will also 
stop playing. Also,^fc > mbre are not enough frames in the main Timeline for the 
graphic symbol's Timeline to completely play, the graphic symbol's animation 
will not complete. For these reasons, graphic symbols are best used for static 
graphics that you want to animate in the main Timeline, or for simple animations 
that you want to have playing within the context of the main movie. 
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Movie Clip Symbols 

Movie clip symbols allow you to create independent animations within the main 
movie Timeline. If the main movie stops playing, the movie clip symbol's anima- 
tion does not have to necessarily stop. Therefore, you can do a lot of things you 
can't do with a graphic symbol. For example, you can use a movie clip symbol 
to create a looping animation within the main Timeline. Additionally, you can use 
a movie clip symbol to create an animation within a button. Movie clip symbols 
can contain both buttons and sounds, and you can control their playback from the 
main Timeline. 

Button Symbols 

Button symbols allow you to create elements in your movie that let viewers inter 
act with the movie using the mouse. A button symbol's Timeline is different tifoo^ 
the graphic or movie clip symbol's Timeline. It only consists of four frami 
for each state of the button (up, over, down, and hit). 

While button symbols are certainly used for traditional buttons in the mov 
can create interactive controls that do not resemble traditional buttons at 
example, you can use button symbols to create animations that follow 
tion of the cursor as it moves around the screen. 






What are Instances? 

Once you create a symbol, or convert an object to a symbol, that symbol is stored 
with the movie, but isn't used directly on the Stage. Instead, you create instances 
of that symbol. Instances are, in essence, copies of the original symbol, but they 
differ in two major ways. First, an instance of a symbul doesn't add significantly 
to the file size of the movie, whereas a copy and an iteti^w^uld. Second, 
instances are linked to their parent symbols, so if yoH^change the symbol, the 
instances of that symbol automatically change in the movie. But even though the 
instances are linked to its symbol, you can change certain aspects of the instances 
without breaking the link. ^ — 



Let's say that you want to have five buttons in your movie that look tfr^alj 
except you want them to be different colors. You could create five bjtftoh^m- 
bols, making each a different color. However, you could also create one button 
symbol, and use five instances of that symbol changing the color of each 
instance. This would make the fii^ siz^ mjujH smaller than if vojic^ated five 
symbols. 







movie clip symbol: 

A symbol best used for 
animations that are 
independent of the main 
wie Timeline. 



button symbol: 

A symbol that contains four 
frames allowing you to create 
buttons with visible changes 
as the user interacts with 
them. 




instance: 

A copy of a symbol, which 
doesn't add to file size and is 
linked to its parent symbol. 
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Topic IB 

Graphic Symbols 



In order to apply motion-tweened animation to an object, it needs to be converted 
to a symbol, since standard objects drawn within Flash can only use shaf 
tweens. Graphic symbols are best used for static images, or tor animations that 
you do not want to run independently of the main movie's Timeline. 

A graphic symbol's Timeline looks identical to the main movie Timeline. You can 
use multiple layers, masks, motion guides, and mo?t other elements that you can 
add to the Timeline of the main movie. HoweveCroux^nnot add sounds or 
movie clips within a graphic symbol's Timelrrf&VS^^. \. 

You can create a graphic symbol using oq^^frwftxmethcds. First, you can create 
an object within Flash, and then use the Convert to Symbol command. This will 
convert your shape to a symbol, and automatically turn your original shape into a 
linked instance of that symbol. 

Second, you can create a new symbol using the New Symbol command, and 

s Timeline. When a graphic symbol only 
equally well. However, if you are 
asiest to work directly within the 



work directly within the graphic * 
includes a static image, either rapt 
building animation within the^sym 
symbol's Timeline. 



You will now create an object that will eventually form the basis for a button 
using Flash's drawing toe's You will then convert mat < ^^^Mo a graphic 
symbol. 









TASK 1B^@ ^ 

Converting an Object to a Graphic Symbol 



1. Launch the Flash MX applicatic 

^e>*( ! \qtuI&iJ / Tnovie appears. nN^I 



Flash application launches, and a 



You will use the Oval tool to draw a circle on the Stage. Using the Oval 
too!, draw a circle on the Stage. With the circle selected, use the Prop- 
erty Inspector to set the width and height of the circle to 150 pixels. 







v not 







w remo 



You will now remove the stroke from the circle. Remember that you can 
simply click once on the circle's edge to select the stroke. Click on the 
edge of the circle to select its stroke, and press [Backspace]. 

You will now create a custom gradient for the circle's fill. Click on the 
circle to select it. Choose Linear from the Fill drop-down list in the 
Color Mixer. 
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5. 



The gradient settings now appear in the Color Mixer. Click on the color 
marker below the left edge of the gradient bar to select it. 



6. 



7. 



8. 




Enter the following values in the Color Mixer: R-251, G-203, B-203. The 

initial color of the gradient is set to a light pink. 

You will define the ending color for the gradient. Click on the coF 
marker below the right edge of the gradient bar to select it, 

Enter the following values in the Color Mixer: R-194, G-90, B 

ending color of the gradient is set to a dark pink. 







9. Now that you have created the gradienf>you N wifr"5Htfe it to the Swatc 
panel so that you can use it again. Choose Add Sv/atch from the C 
Mixer drop-down list. The gradien^yeu/defmed is now saved in tl 
Swatches panel. 

10. Next you will rotate the circle ^(fegre&s-so the lighter color isNaMne top of 
the circle. While you could use the Transform Fill tool, in liifccase, you do 

abitgleHnstead, you can simply rotate the 
e circle is selected, type 96 in the Rotate field 



not have to, since the sha] 
entire circle. Making sur* 
in the Transform palette. 






grsd^i^Kl^nbw moves in a vertical direction, with the lighter color on top. 

11. Next you wili copy the circle and then paste the duplicate to a new layer 
that is above the original. Select the circle and choose Edit— >Copy. 



12. Click the Insert Layer button -jrjp below the Timeline 
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13. 



14. 



15. 



17. 



Making sure the new layer is selected, choose Edit— >Paste in Place. You 

have pasted a duplicate of the circle directly on top of the original. 

You will now choose a solid color fill for the duplicate circle. Choose Solid 
from the Fill drop-down list in the Color Mixer. Enter the following val- 
ues in the Color Mixer: R-255, G-152, B-159. 





Next you will resize the duplicate circle using the Info palette so that the 
duplicate is slightly smaller than the original. Click on the center dot in the 
location proxy in the Info palette. This will keep the circle centered when 

you resize it. / / V ^ — J 



16. Using the Info palette, set the 





• Mo 






*" m Mo 


„ X II? 1 

* v|mj 




n 

t a » 
• tat 


+ *«* 
v mi 






nd height of the circle to 140. 






Once again, you will create a new layer and paste the duplicate in place on 
the ney& Biy^r. Create a new layer. Thece are^ow three layers in the 
document Making sure the top layer is selected, choose Edit— >Paste in 

Place / ^Th^ dbpliejtfe is placed in therop/layer. 

asted the original 




Jjep't filled circle, the duplicate is still 
gradient. You w^ff^the gradient of the duplicate circle to 
arker color starting^at miytop of the circle and the lighter color at 
. Once again, yoo^an simply rotate the circle using the Transform 
re selected, type 270 in the Rotate field in 
radient is now rotated so it runs the opposite 



yo 
ith t 
e me 
the botto 
aletce With the new d 
ansform palett 
^^\direction of the origij 

, Using the Info paiette, set the size of the new duplicate circle to 110. 

20. Finally, you wtKoteme one more layer to place the final circle that will 
comprise the ^sic/bottle cap. Create a fourth layer, and paste the dupli- 
cate circle in place once again. 




21. 



You will use the same solid fill color as you used for the second circle. Set 
the fill color to the following values in the Color Mixer: R-255, G-152, 
B-159. 



22. Using the Info palette, set the size of the circle to 85. The original bottle 
cap is complete. 




23. You will now select all of the elements that comprise the bottle ca 
Edit^Select All. 

24. You will now convert the selected bottle cap elements to a graphii 
Choose Insert— >Convert to Symbol. The Convert to Symbol dialog 
appears. Type Bottlecap in the Name field. Click the 
button. 
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25. 



You have created the symbol. Two things occur when you convert an object 
or series of objects to a symbol. First, the symbol itself is added to the docu- 
ment's Library. Second, the original object is converted to an instance of that 
symbol, which is located in the document's Library. Choose Window— > 
Library. 





You are now viewing the document 
listed. In addition, the Property Inspi 
selected bottle cap on the Stage, iudi 
Bottlecap graphic symbol 



26. 



7//7 




y. The Bottlecap symbol is 
ays the information for the 
at it is an instance of the 




Choose File— >Save. In the Save As dialog box, name the document 

Bottlecap. Place the Bottlecap.fi?, document in the 

Flash MX Level 2 Data folder. Close the Bottlecap document. 





Movie Clip Symbols 





«3? 



You have seen that graphic symbols can work well for static graphics. In addi- 
tion, many Flash designers use graphic symbols for simple animations. However, 
the animations in a graphic symbol hav^gwal limitations. First, a graphic sym- 
bol caimot^OTntstrn/buttons or sounds^«bbna, a graphic symbol always plays in 
conjunction with the main movie Timeline. If the main Timeline has fewer frames 
the graphic symbol's animation, the animation won't complete, and if the 
stops, so does the graphic symbol's animation. 




ration in a movie clip symbol plays independently of the Timeline. 
Therefore, movie clip symbols offer much more flexibility in creating animations. 
You can use movie clip symbols to create animations that loop and repeat within 
theyttiain Timeline, ev6n-~fr\the main Timeline stops. Movie clip animations can 
contain sounds, and^t^puttons. You can combine movie clip symbols in the 
main Timeline to create multiple animations. Further, you can use movie clip 
symbols to add animation to a button state or to create dynamic rollovers. This is 
just the beginning of what you can do with movie clip symbols. 

You will now build a movie clip symbol that will contain a frame-by-frame 
animation. You will then animate the symbol within the main movie Timeline, 
and will combine that movie clip symbol with others to create a complex 
animation. 



TASK 1 C-1 : 

Creating a Movie Clip Symbol 

1. Create a new Flash document. 

2. You will now create a movie clip symbol. In this case, instead of converting 
existing content to a symbol, you will create the symbol first, and work with 
the symbol's Timeline directly. Choose Insert— >New Symbol. The Create 
New Symbol dialog box appears. 

3. Type Paddling in the Name field. Click the Movie Clip radio button. 





Lr+*c* 



lt+«ge □EnwitaAcHorfoxx 

I ] Import la [ .'>' r r I -i I 

Eipcrt rim time 



AJmmir i^date betae pubk'.tu>Q 
Synod Nmm SymtooH 




Click OK. Flash creates a new movie c^p^yi^bmrYou are now viewj 
Paddling movie clip symbol's Timeline. A movie clip symbol's Time 
looks identical to the main movie's 
are viewing the symbol's Timeline 
mation bar above the top left c 
movie clip symbol appears there, so 

ct^Qfih* 



low 



;es that was created 




However, you can t 
the selected item 
ge. Currently, the fa 
you are viewing li 



eternal 
scheme and 



You will now import a ser 

image editing program. Because ihe files use a similar 
are placed in the same location, Flash will recognize that they may be a 
series. Choose File— >Iinport. The Import dialog box appears. Navigate to 
the Canoe Animation folder inside the Flash MX Level 2 Data folder. 



Click on any one of the jmages in the fold 

box appears indicating that Flash recognizes 
of images 




u click Open. An alert 
age as part of a sequence 




Click Yes to import the images in the folder as a sequence. Flash imports 
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the images, placing each image on a separate keyframe in the Timeline. 



Next you will simply play the frame-by-frame animation within the movie 
clip symbol's Timeline. Press [Enter] to play the animation. 

You will now return to the main movie Timeline. Click Scene 1 in the 
information bar to view the main movie's Timeline. 




Because you began by creating a new symbol instead of converting existing 
content to a symbol, there are no instances of the symbol on the Stage. You 
will now add an instance of the Paddling movie clip symbol to the Stage. 
Choose Window— >Library to view the current document's Library, if 
necessary. 



• l*f«ry DM* ltd I 





j7/> 

The Library contains the Paddling movie clip symbol, along with each of the 
imported bitmaps X)/m> Comprise the symbol. Any ty^vou import a bitmap 
image, it is automatically added to the Library. 



Drag the Pa* 
mouse 
center 



ie clip symbol onto to the Stage, releasing the 
instance of the symbol is approximately in the 
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10. When you want to view a movie clip symbol in the main movie Timeline, 
you cannot simply play the movie, because the movie clip symbol's anima- 
tion runs independently of the main movie Timeline. Instead, you need to 
preview the movie. Choose Control— >Test Movie. Flash creates a SWF file 
from the Flash file, and displays it in a Preview window. You can now see 
the movie clip symbol's animation looping repeatedly. 

11. You will save the file. Close the Preview window. You return to the Flash 
movie. Choose File— >Save. In the Save As dialog box, name the file 
Paddling Animation, and save it inside the Flash MX Level 2 Data 
folder. 



Combining Movie Clip Symbols 

As mentioned before, one advantage of using movie clip symbols for animatio 
is that you can combine them in the main movie Timeline to create more coi 
plex animation sequences. 

You will combine the Paddling movie clip symbol's animation with an additional 
animation to create a complex scene. // V \_/ Y 




TASK 1 C-2: 

Combining Multiple Movie Clip Symbo^> 





2. 



You will now open an existing Flash document^that^bnteihp some objects 
you will use to build a more complex animation. Open the Water Scene.fla 
document located inside the Flash MX Level 2 Data folder. The 

Water Scene document contains two waves objects that have already been 
converted to graphic symbols. In additid^e^sh^oTffie symbol instances-3^v^ 
been placed on their own layer in the^ecument. 

You will now create an animation sequence that consists of the w^Bs^pjects 
and the Paddling movie clip symbol frorrrlwPaddling Animat^^^tovie. 
You will begin by importing the Paddling movie clip symbol by simply 
dragging and dropping between the librades of the Paddling Animation and 
Water Scene documents. Choose Window— >Paddling Animation to view 
the Paddling Animation document. Choose Window->Library, if the 
Paddling Animation Library is not showing. 



Choose Window— >W. 
Choose Windo 




to view the Wat 
the Water Scene Li 




Scene document, 
ry is not showing. 



Drag the Paddling movie clip symbol from the Paddling Animation 
Library into the Water Scene Library. The Paddling movie clip symbol 
and the associated image files are all copied to the Water Scene Library. 
Now that the symbol is in the Water Scene document, you can use it. 
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Close the Paddling Animation document and Choose Window— > Water 
Scene to view the Water Scene document, if necessary. You will add an 
instance of the Paddling movie clip symbol to the Stage, and will then ani- 
mate it. You will begin by creating a new layer, placing it below the Front 
Waves and Back Waves layers. Click the Insert Layer button. Name the 
new layer Canoe. Move the Canoe layer below the Front Waves and 
Back Waves layers. 





m i 


□ 


Front Waves 


• • 


□ 


G? Back Waves 


• • 


□ 








You will now place an instance of the Paddling movie clip symbol on the 
Stage. Making sure that the Canoe layer is active, drag an instance of 
the Paddling movie clip symbol to the Stage. Place the instance so it 
appears that the canoe is partially in the water. You have added an 
instance of the symbol. 




s S^\Once again, you wilHjj^ipw the movie. Press [Ctrl] [Enter]. A Preview 
\window appears displaying the movie. The Paddling movie clip symbol's 
animation looping continuously. While the main Timeline only contains one 
frame, the entke^meyie clip animation is able to play, because its animation 
is independent of the Timeline. If the Paddling animation were placed inside 
a graphic symbol , only the first frame of the animation would show.Close 
the Preview window. 

While you can obviously have animation within a movie clip symbol, you 
can additionally animate the symbol itself within the context of the main 
movie Timeline. You will have the canoe rotate slightly to appear as if it is 
being carried by the waves, as the looping animation plays. To do this, you 
create a simple motion tween with several keyframes. 



You will first extend the Timeline for all of the layers so they will be visible 



for the duration of the motion tween. Drag in frame 60 from the Front 
Waves layer down to the Canoe layer. Choose Insert— >Frame. You have 
extended the Timeline for all of the layers to frame 60. 



12. 



13. 



14. 



«* (1 □ 1 5 10 15 20 ' ' 25 ' ' '30* ' ' 35* ' ' 40" ' ' 4s' ' ' 50 55 1 




\j) From Waves ♦ • ■ 


• 




\j) Back Waves * ♦ ■ 


• 











Next you will create keyframes for motion tween. Click on frame 20 of the 
Canoe layer, and choose Insert— >Keyframe. 



10. Create keyframes at frame 40 and frame 60 in the Canoe layer. 



□ i 



U Front Waves 



D? Back Waves 



11. You are now ready to create the motion tween. Click on the keyframe in 
frame 20 in the Canoe layer. You will rotate the Paddlin 
ever, its transform point is currently set to its top left co 
the transform point so it is at the center of the movie cl 
Modify— >Transform—>Free Transform. Drag the tra 
the top left corner of the Paddling instance to its center. 






palette. Type 
t the rotation 



You can now enter a value in the Rotate field in the Tra; 
10 in the Rotate field in the Transform palette. You 

value for the keyfntaigs^Nrame 20. 

Click on frame 40 in ihe Cai?.oe layer. Set the transform point to the 
center of the Paddling instance, and type -10 m the Rotate field in the 
Transform pa^tfes^Vpu Pjave set the rotatior/^^feTor frame 40. 

The keyframes at frames 1 and 60 already have the rotation value set to 0, 
which is what "yWVant. However, you need to set the transform point for 
the^osB^keyframes so it is in the center of the Paddling instance. Click on 
frame 1 in the canoe layer. Set the transform point to the center of the 
Paddling instance. Set the transform point to the center of the Paddling 
instance in frame 60. 



Lesson 
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15. 




e waves objects has already been converted to a graphic symbol. 
NYcftr^v/ll now create a movie clip symbol that will contain the animation of 
tlie-wves. Choose Insert— »New Symbol. The Create New Symbol dialog 
Av^Ov ^Sbox appears. Type tya vtesi^f nimation in the Name field, click the Movie 
Clip radio button, and click OK. You are now viewing the movie clip 



At this point, you are ready to establish the motion tweens. Click on any 
frame in the Canoe layer between frame 1 and 20, and choose Insert— > 
Create Motion Tween. You have created the first motion tween. Add a 
motion tween between frames 20 and 40. Add a third motion tween 
between frames 40 and 60. 




16. You are ready to view the animation. Press [Enter] to view the animation. 

The movie clip symbol moves. However, only the first frame of the Paddling 
animation is visible. In order to see the independent Paddling animation 
within the movie clip, you need to previ^^tfte moyTe>v 



Tew 



indow. The Paddling 
the movie clip is ani- 




17. Press [Ctrl] [Enter]. The movie pla 
animation continuously loops, while the hi 
mated by the motion tween. 

18. Close the Preview window/^nd sjave^^^Aji^ter Scene document. 

Multiple Movie Clip Symbols/ 

Within the same main movie Timeline, or even within movie clip Timelines, you 
can embed multiple movie clip symbol instances. This aUow^ou to create com- 
pletely independent animations that use different durations, and that can be 
altered as necessary. ^\ ^\ 

You will now anima^eTbe waves objects as a movir cMp, and add it to the main 
movie Timeline sdi tlW ycm oan have multiple independent animations running. 






Combining Multiple Movie Clip Symbols 



A 



5# 



symbol's Timelin^^N 



2. You will now piepare the layers in the Timeline for the two waves objects. 
Rename Layer 1 to Back Waves. 



Create a new layer and name it Front Waves. Make sure the Front 
Waves layer is above the Back Waves layer. 
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6. 



7. 



8. 



9. 



You are ready to place an instance of the Back Waves graphic symbol into 
the first frame of the Back Waves layer. Click on the first frame of the 
Back Waves layer. Drag an instance of the Back Waves graphic symbol 
from the Library window to the Stage. 

You will resize the instance of the Back Waves symbol so it extends 50 pix- 
els beyond the left and right edges of the Stage. Making sure the Back 
Waves instance is selected, enter the following values in the Info palette: 
Width: 650, X: 0, Y: 0. When you set the center point of the object so that 
its X and Y values are 0, the center point of the object line's up with the 
registration point of the symbol. This becomes important as you place sym- 
bol instances on the Stage within other symbol Timelines, or within the main 
movie Timeline. 

Click on the first frame of the Front Waves layer. Drag an instance 
the Front Waves graphic symbol from the Library window to the^t; 

/\ 

You will also resize and position the Front Waves instance using the Info 
palette. Click on the Front Waves instance to select it, and type 650 in 
the Width field in the Info palette. Line up the bottom, left, ar 
edges of the Front Waves instance with the bottom, left, and 
of the Back Waves instance. (Hint: You can use the arrow keys t 
the selected instance on pixel at a time.) 

You will now create several motion tweens for each of the waves objects. 
You will begin by creating the keyframes. Drag from frame 12 in the 
Front Waves layer down to frame 12 in the Back Waves layer. You have 
selected frame 12 in both layers. Choose Insert— >Keyframe. Keyframes are 
added to frame 12 for both layers. 









v ' ' s io n 


Ij? Front Waves • • ■ 










! ^ 



10. Insert keyframes in both 



P Front Wares 



11. You will now 
on the keyfra 
field in tin 




You will add keyframes to both lay 
frame 24 in the Front Waves laye 
layer. Choose Insert— >Keyfra 




on of each waves 
12 in the Front 



each keyframe. Click 
layer. Type 50 in the X 



12. Click on the keyframe at frame 24 in the Front Waves layer. Make sure 
that the value in the X field in the Info palette is 0. 

13. Click on the keyframe at frame 36 in the Front Waves layer. Type -50 
in the X field in the Info palette. 
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14. 



Click on the keyframe at frame 48 in the Front Waves layer. Make sure 
that the value in the X field in the Info palette is 0. 



15. You are ready to build the motion tweens for the Front Waves layer. Right- 
click in the Front Waves layer between the first two keyframes, and 
choose Create Motion Tween from the shortcut menu. You have created 
the motion tween. 



16. Create motion tweens for the remaining keyframes i 



layer. 



17. 



18. 



Next you will specify the object positions attach ke((framfe flor the Back 
Waves object.Click on the keyframe at frame 32 in the Back Waves 
layer. Type -50 in the X field in the Info palette. 




Waves 



19. 



20. 



21. 



Click on the keyframe at frame 36 
value in the Info palette to 50. 
Info palette in the keyframes at 
layer. 

Create motion tweens 
layer. 




ves layer. Set the X 
lue is set to 0 in the 
48 in the Back Waves 



keyframes in the Back Waves 



You have finished creating the animation within the Waves Animation movie 

clip symbol. You will now view the main movie Timeline once again. Click 

Scene 1 in the information bar to view the main mrme Timeline. 

rm ™^ 

You will now alter the main movie Timeline for the Water Scene document. 
You will begin by deleting both the Front Waves and Back Waves layers 
from the Timeline. This will also remove they«pgkrEil instances of the Front 
Waves and Back Waves graphic symbols. You will then create a new layer 
that will contain an instance of the Waves Animation movie clip symbol. 
Click on the Front Waves layer in the Timeline. Click the Delete Layer 

layer. 




the Back Wave; 




button 



22. Next you will create a new layer to contain an instance of the Waves Anima- 
JkOT\^oVie-t;ljp symbol. Create a new layer called Waves. Make sure the 
aves layer is above the Canoe layer in the Timeline. 
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23. Click on frame 1 in the Waves layer to select it. Drag an instance of the 
Waves Animation movie clip symbol to the Stage. Set the X value in the 
Info palette to 275, and line up the bottom edge of the movie clip sym- 
bol instance with the bottom edge of the Stage. 




24. 



You will now preview the movie. Press [Ctrl][Enter]. Flash displays the 
animation in a Preview window. Close the Preview window, and save the 
file. 




Nested Movie Clip Symbols 

When you viewed the movie, you could see^oth she^ 
dling animation sequences continuously looping. However, each animation lc 



. av^s/Animation and Pad^x> 
lQ»Red> 

for a different reason. The Waves Animation sequence looped because it is/15K\/ 



ce 



instance a movie clip symbol. The motion-cweened Paddling animation sequenc 
looped because the entire movie loops by defauttT\ 

You can vastly simply the main movie Timeline for the Water Scen^^Ht^ue. To 
accomplish this, you can simply convert the motion tween of the Paddling movie 
clip symbol instance into a new otovie clip symbol. What you aft^essentially 
doing is nesting an instance of /thfevPaddlmg movie clip symbol along with its 
motion tween into a new moyi^ clip symbol. Once you do thi^ma main movie 
will simply consist of tw<) mfcwae Nsljps; one for the motio p-^ra gned Paddling 
symbol instance, and one of the Wav^s Animation. Because^ter only animation in 
the movie is occurring wwhyi moyi^ clip symbols, you-xan reduce the movie 
Timeline to a single 
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TASK 1C-4: 

Nesting Movie Clip Symbols 



1. To convert an existing animation to a movie clip symbol, you simply need to 
copy the frames that comprise the animation, and paste them into the movie 
clip symbol's Timeline. Click on the Canoe layer name in the Timeline. 
All of the frames in the Canoe layer are selected, along with the objects and 
defined tweens in those frames. 

2. Choose Edit— >Copy Frames. 

3. Create a new movie clip symbol called Pad 

4. In the Paddling Animation movie clip Timeline, click on the first frame. 
Choose Edit— >Paste Frames. The sing'e^fewrKjgflamed Canoe and the 
animation is pasted into the Timeline. The movie clip symbol is complete. 

5. View the main movie Timeline. 






Timeline so you can place an instance of 
g in the Timeline from frame 2 in 
anoe layer. All of the frames except 
— >Remove Frames. The Timeline is 



You will now alter the 
the Paddling Animatio: 
the Waves layer to fra 
the first are selected. 

now one frame in duration. 

Next you will swap the instance of the Paddling movie clip symbol, so you 
can replace it with Msinsrance of the Paddling AT&nation movie clip sym- 
bol, which contains the motion tween. Click on frame 1 in the Canoe 




le instance of the Pa 



layer, and cli 
[Backsp^c^A^ 

Drag an instance of the Paddling Ar. 
Library palette to the Stage. 



addling symbol to select it. Press 
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9. The Timeline is complete. Press [Ctrl] [Enter] to preview the movie. The 

animation looks the same as before, but the Timeline is much simpler. 

10. Close the Preview window. Save and close the Water Scene document. 



Topic ID 




Button Symbols 

A button symbol's Timeline differs from the Timelines of a graphic or movie clip 
symbol. A button symbol's Timeline consists of only four frames; one for each 
button state. The four button states are Up, Over, Down, and Hit. The Up stai 
appears when the button is in its normal, default state. The Over state appears 
when the viewer moves their cursor over the button. The Down state appears 
when the viewer clicks on the button. Finally, the Hit state doesn't actual 
a visual change. Instead, it defines the hot area of a button, if you want 
nate one that is a different shape or area than the contents of the other 
frames. 

By placing keyframes in each of the four frames, you can concrol the effect of cne 
cursor interacting with the button symbol. Just as with a Timelineyh & graphic or 
movie clip symbol, you create keyframes when you want the content to change in 
a particular frame, so you do not necessarily need to define a keyframe for each 
frame. For example, if you are building a button that changes only when the 
viewer clicks on it, you only will have keyframes in the Up and Down frames, 
but not the Over and Hit frames. 

You will begin by creating a simple button that corvstsTs^ofsMati)? image states. In 
this case, the button will change appearance when the viewer moves the cursor 
over the button, and will change to a different appearance/when the viewer clicks 
on the button. <V /f 




mm-. 

Creating a Button Symbo 




«3) 

Static Image States 



1. Open the Bottlecap document located inside the Flash MX Level 2 Data 
folder. The Bottlecap file, which you created earlier, contains a single 
graphic symbol called Bottlecap. 

2. You will now create-a nfew^mr/ton symbol using the Bottlecap graphic sym- 
bol as its basis.Choose Insert— >New Symbol. The Create New Symbol 
dialog box appears. Type Bottlecap Button in the Name field. Click the 
Button radio button, and click OK. You are now viewing the button sym- 
bol's Timeline, which consists of four frames. 



A, 




P Layer 1 



Up | Over | Down | Hit 



You will now build the button using static image states, beginning with the 
Up state. Choose Window— >Library to view the document's Library 
palette. Drag an instance of the Bottlecap graphic symbol to the Stage. 

You will now align the center of the graphic symbol to the center of the 
Stage. It's often important to align elements to the registration point on the 
state so that you can create subtle and precise variations within an animation 
or a change in an image state. The easiest way to do this is touss^the Info 
palette. A C 




e, and 

mbol now lines 



Click on the center dot in the location proxy in t 
type 0 in both the X and Y fields. The Bottlecap g 
up with the registration point. 

You want a spiral shape to appear in the 
viewer moves the cursor over the button 

keyframe to the Over frame. Just as ^o^ / djiy>sqtri s a.regular Timeline, in order 
for there to be change to the content, you need to add a keyframe. By 
default, the new keyframe will inherit the content from the previous one, so 
you generally build your Timelines from left to right. 



utton when the 
ou will add a 




You will now begin by creating a new layer in the button symbol's Timeline 
to place the spiral shape. Create a new layer. Name the layer Spiral, and 
make sure that the Spiral layer is above the original layer. Change the 
name of the original layer to Button; 



Next you will create 
on the Over frame 




keyframe in the Over frame 
he Spiral layer and chooi 




piral layer. Click 
— >Keyframe. 



You will also add a frame to the Button layer, so that the button shape still 
appears in the Over frame. Click on the Over frame in the Button layer, 

~"o\not want to insert a keyframe here, 
ImsMjje content from the previous frame. 



d choose Insert— >Frame. Y 




Now you will open an existing Flash file that contains the spiral shape. 
However, since the shape is in the other file's Library, you can simply open 
the Library without opening the document. Choose File— >Open as Library. 
The Open as Library dialog box appears. Select the SpiraLfla document 
inside the Flash MX Level 2 Data folder, and click Open. The Spiral 
file's Library appears in a separate Library palette. 



10. 



11. 



12. 



13. 



Click on the Over keyframe in the Spiral layer. Drag the Spiral graphic 
symbol from the Spiral Library palette to the Stage. The Spiral graphic 
symbol is added to the current document's Library, and the instance of the 
symbol is now on the Stage. With the Spiral instance selected, type 0 in 
the X and Y fields in the Info palette to line up the Spiral instance with 
the registration point. 




Finally, you will create another visual change for the Down frame/-whi- 
will appear while the user holds the mouse button down on the button, 
will create a soft glow that will appear around the button. Create a new 
layer called Glow, and move the layer to the bottom of the sta 
order in the Timeline. Click on the Down frame in the Glow la 
choose Insert— >Keyframe. 





| Up 


| Over 




wnj Hit 


\3 Spiral 


• * ■ 


o 


• 






Button 


• • ■ 


• 


D 
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o 


D 





Make sure the keyframe in the Down frame in th 
selected. Using the Oval tool, draw a circl 
150 using the Info palette. Use the Info 
for both the X and Y values. 





Glow layer is 
idth and height to 
its center point t 



nto palette tc 

Fill the circle with pale yellow, and remove the stroke from the 



You will now create a fuzzy edge 
Choose Modify^Shape^Soft; 
box appears. Type 8 in the 
of Steps field at 4. 





d the circle to create the 
Edges. The Soften Fill 
Leave the value in t 





feet, 
dialog 
dumber 
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14. 



You will now extend the Spiral and Button layers to the Down frame so that 
the both the button shape and the spiral shape continue to appear when the 
button is pressed. Select the Down frame in both the Spiral and Button 
layers, and choose Insert— >Frame. The button shape now appears in all 
three frames. The spiral shape appears in the Over and Down frames, and 
the glow only appears in the Down frame. 



an 



G? Spiral 



Button 



P Clow 



Up | Over [Down | Hit 



15. 




You have completed the button. You will now view the mam movie 
Timeline, where you can drag an instance of the buttsri you created to the 
Stage. Click Scene 1 in the information bar5\ 



16. Delete the instance of the Bottleca 
Drag an instance of the Bottleca 
Library to the Stage. 



17. 



graphic symbol from the Stage. 
Juiton button symbol from the 




You will now test the butt$*h^n oreler s te-£e^ buttons operate, you need to 
test the movie. Press [Ctrl] [Enter]. Flash displays the movie a preview 
window. Move the cursor over the button. The content in the Over frame 
now appears. Click on the button. While the mouse button is actually 
pressed down, the content of the Down frame appears. Close the Preview 
window, and save the file. sf^jO? 




Working wit 




d Button S1 



While buttons with s^ticjkiage states are certainly impressive, you can add even 
more dramatic lmpaet^toj&efur buttons by usi^anroated image states. By adding 
a movie clip symbol to one of the button's frames, the movie clip symbol's ani- 
mation will play continuously while the mouse is interacting with the button in a 
way that triggers that particular frame. J^oN^xa'mpIc, you can place a movie clip 
symbol in the Over frame of a button, and while the cursor is over the button in 
the rriovie, the nj^vie clip's animation will play. 

imembfcr trat because a movie/Mjp symbol plays independently of the main 
ivJe^Timelme, a movie clip's animation can play within a single frame. For this 
reason, if you want to add animation to a button state, you must use a movie clip 
symbol. Animation within a graphic symbol will not work, because a graphic 
bol's animation will only play when there are enough frames in the Timeline. 

Yotf will alter the Overftstme of the button so that the spiral rotates while the 
cursor is over the b / ui(Q»r2'o do this, you will create a new movie clip symbol 
with the Spiral shape rotating. 
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TASK ID 2: 



Creating a Button with Animated Image States 



3. 



4. 



5. 



6. 



7. 



8. 



Create a new movie clip symbol called Spiral Animation. You are view- 
ing the Spiral Animation movie clip's Timeline. 

Drag an instance of the Spiral graphic symbol to the center of the Stage, 
and line up the center of the spiral shape with the registration point. 

Next you will create a motion tween. Remember that this animation will 
loop because it is part of a movie clip symbol. You have will have the spiral 
shape rotate. Click on frame 12 in the Timeline. Choose Insert— > 
Keyframe. 

You will now add a motion tween between the keyframes in frames F^^^N 
12. Right-click in the Timeline between the two keyframes, and chooses^v 
Create Motion Tween from the shortcut menu. 

You will now use the Property Inspector to set up the motion twe< 
CW from the Rotate drop-down list in the Property Inspector, 
the Times field in the Property Inspector, if necessary, ^u/n 
motion tween to have the shape rotate one time clockwir- 





You have completed the Spiral Animation mOvi/TcIrs sVnbol. Next you willn~ 
return to the Bottlecap Button Timeline, so that y^ujW replace the static 
Spiral graphic symbol in the button's Over frame with the Spiral Animation 
movie clip symbol. Double-click on the Bottlecap Button symbol i 
Library. The Bottlecap Button symbol's Timeline appears. 



Click in the Over frame in the S\ 
the Spiral graphic symbol. 




and delete the i 




Drag an instance of the Spiral Animation movie clip symbol from the 
Library to the Stage, and use the Info palette to set the instance's 
centerpoint so it lines up with the registration point on the Stage. 

You will now create a Revframe^n the Down frame ofi^be'Spiral layer, and 
you will place an iri>t&BQe N b£'the Spiral graphic symbol. This will cause the 
static spiral shape to appear along with the glow around the button when the 
button is pressed. Ciick on the Down frame of the Spiral layer, and 
choose Insert— >Blank Keyframe. By inserting a blank keyframe, the con- 
tents of the Over frame of the Spiral layer do not carry over to the Down 
frame. With the keyframe in the Down frame of the Spiral layer 
selected, drag an instance of the Spiral graphic symbol to the Stage, and 
use the Info palette to set the instance's centerpoint so it lines up with 
the registration point on the Stage. 



10. You are ready to test the button. Click on Scene 1 in the information bar 
to view the main movie. Press [Ctrl] [Enter] to preview the movie. 



11. Move the cursor over the button. The animation plays. 

12. Click on the button. The spiral shape stops spinning, and the glow appears 
around the button. 



13. Close the Preview window and save the file. 





Managing Symbols and Instance 

You have seen a little bit about symbols as you s haye N ereated each symbol type. 
However, using Flash's symbol management tbols/and cteaoy understanding the 
relationship between symbols and instances can make it much quicker and easier 
to build your projects, and can help yorf keep your file size (and download time) 
down. 

As you have seen, there are two ways to create symbols. You can either convert 
content that already exists on the Stage \to \vSymbol, or you can create a new 
symbol and create content directly in the symbol's Timeline. However, while 
symbols are the building blocks(of/your Flash projects, it's the instances of the 
symbols that actually provide conte^f thm the viewer accesses. 

You will now work with the Bottlefcagprovie, creating sev^aj> instances of the 
animated button symbol. This will help you to see how creating a button symbol 
and working with installs (saves you time when you *6^thjit symbol multiple 



times m your project 



TASK 1E-4> 



Creating Instances 






inq Instanc 



5# 



Make sure you are viewing the Bottlecap movie's main Timeline. You 

ow-xemove all of the laye^ejlcept one, since you only needed the 
yers to build the original button symbol. Click on Layer 4. While 
down the [Shift] key, click on Layer 2. Click the Delete Layer 

^ i ^V Ss b^ftoj/ The Timeline n^f^i^ a single layer and a single frame. 

\Next you will add irjstmig^ of the Bottlecap Button symbol. Drag an 
instance of the Bottlecap Button symbol to the Stage. 

You can resize ance without breaking the link to the original symbol. 

With the instance selected, type 50 in the Width field in the Transform 
palette, and press [Enter]. The instance of the button is resized to 50 
percent. 

4. You can also duplicate an instance without needing to drag a symbol from 
the Library. With the button instance selected, choose Edit— >Duplicate. A 
duplicate instance appears. Drag the duplicate button instance below the 
original. 



5. You will now test the button instances. Press [Ctrl] [Enter] to test the 
movie. The Preview window appears. Move the cursor over the button 
instances, and click on them to see the buttons operate. Close the Pre- 
view window. 



8. 



9. 



When you use instances, you maintain a link to the original symbol, so if 
you change the symbol, the instances will change. Remember that the 
Bottlecap button symbol uses the Spiral Animation movie clip symbol, 
which in turn uses the Spiral graphic symbol. You will now alter the Spiral 
graphic symbol to see how it affects the symbols based on it, and the 
instances of those symbols. Double-click on the Spiral graphic symbol in 
the Library. You are viewing the Spiral graphic symbol's Timeline. 

Click on the spiral shape on the Stage, and choose Modify— >Ungroup. 

The spiral shape is ungrouped, so you can alter the various objects that 
prise the shape. 

You will change the white portions of the spiral shape to pale yellow^Clit 
on one of the white portions of the spiral shape and select a pa 
fill color. 



Fill the remaining white portions of the spiral with t 
fill color. 



10. 



11. 




Click on Scene 1 in the information bar to 
Timeline. ~ 

You will once again test the buttons. Press [Ctrl] [Enter] to test the 
Once again, the Preview window appears. Move the cursor over tht 
buttons. The buttons now use the new spiratTvolor for both the spiral 
tion in the Over frame, and the static spiral shape in the Down frame, 
because the Spiral Animation nrovk^clip symbol uses the Spiral graphic 
symbol as its basis. 



12. Close the Preview windc 



jve the Bottlecap file an 





The Document Library 

Each Flash documenthe^ks^wrTXibrary. This is se|Mgt^/from the Flash com- 
mon libraries that contain pie-formatted buttons, sounds, and other elements. As 
you have akeadvjse^ehrm&ijKrary belonging to each Plash document is where 
symbols that yfrn^reate^jn-'Rash and imported graphics (which are automatically 
converted to symbols when you import them) reside. 

Once symbols are in the Library, you can access them, organize them, examine 
them, and otherwise manage these many building blocks that make up your 
projects. 
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As you have seen, using symbols can make content creation quicker. For 
example, you used the Spiral graphic symbol as the basis for the Spiral Anima- 
tion movie clip symbol, instead of building the animation completely from 
scratch. Additionally, if you make a change to the Spiral graphic symbol (chang- 
ing its color, for example), the Spiral Animation movie clip symbol will 
automatically update to reflect that change. 



When you do use symbols as the building blocks for your pre 
should, you wind up with a lot of symbols. This is where the 
them can really come in handy. In a Flash Library, you car 
folders and subfolders to store groups of symbols. 





TASK 1E-2: 

Using the Symbol Library 




rganize 
erarchy of 



1. You will open another file that contains a Library with a relatively large 
number of symbols. Open the Preloader Flash file located in the 
Flash MX Level 2 Data folder. Choose Window^Library. 








The file contains a large number of symbols. The text was broken apart, and 
each individual character was saved as a graphic symbol. In addition, 
another graphic symbol — Animated L — contains animation that was created 
from the first letter in the text Loading. 



A 



You will now organize the symbols using the tools in the Library palette, 
"nst; you can change the^ft you are viewing the symbols in the Library. 

zan choose to viewJffleJj/ibr ary p alette in narrow or wide view. Click 
the Wide Library View button [□] in the top right corner of the 

Library palette. You nqw see more information about each symbol, which 
will be useful as you add instances of the symbols to your project, and link 
symbols to a shared Library. 

Additionally, yw^can change the order that you are viewing symbols. Click- 
ing on a column heading in Library palette sorts the symbols by that 
column's information, and clicking the Sorting Order button toggles the sort- 
ing order within the column. Currently you are viewing the symbols in 
alphabetical order using the symbol's name. Click the Sorting Order but- 
ton [Xj. The symbols reverse order. Click the Sorting Order button again. 

The symbols return to their original order. 
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4. You will now organize the symbols into folders. By creating folders, you can 
make it easier to locate symbols you need more quickly. You will begin by 
creating a folder to contain the graphic symbols that will make up the ani- 
mated preloader. Click the New Folder button |fjj| in the Library 

palette. Flash creates a new folder in the Library palette. 

5. Type Static Text and press [Enter]. 



6. 



7. 





You will now move the text graphic symbols into the folder to make the 
Library window's items more manageable. Click on the"a" graphic symbol 
in the Library window. While holding down the [Shift] key, click on the 
"o" graphic symbol. All of the symbols within the range are selected. You/s 
now need to deselect the symbols you do not want to place in the folder. 
You can select or deselect individual items by clicking on them while hc^ltky^ 
ing down the [Ctrl] key. 

While holding down the [Ctrl] key, click on the Circle graphi 
and the Animated L symbol, if necessary. Drag any of the sele< 
bols to the Static Text folder. The selected symbols are placed 
folder. 

To view the contents of a folder, you simply double-clicj/on its' ic on. 
Double-click on the Static Text folder icon. The folder expands to display 
its contents. You can collapse the folder by double-clickifrg^nuta/seeond 
time. 



• Uhrary MrelMfefJIa 




7\ > 7 

9. Save and close the Preloader Flash document 



Duplicating Sym 





You will now build ^o^^Tq^^ckly by duplicating j&yjj&gl^ and altering them. 
Remember that when you base one symbol on another, if you change the parent 
symbol, the child symbol will also change. This lets you create multiple objects 
much faster, and Ig^s you~update the child objects automatically if the parent 
objects change. 

You will build a N newSFlash document that will contain a series of buttons you 
will use for navigation. The buttons will be based on the animated Bottlecap But- 
ton button symbol you created in the Bottlecap Flash document. 
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TASK 1E-3: 

Duplicating and Altering Symbols 



2. 



3. 



4. 



You will begin by creating a new Flash document, and then opening the 
Bottlecap Flash file as a Library. Create a new Flash document. Choose 
File— >Open as Library. In the Open as Library dialog box, select the 
Bottlecap.fla document inside the Flash MX Level 2 Data folder. Choose 
Window— >Library to view the document's Librar^rpale^jtev^ 

Drag the Bottlecap Button button symbol from the Bottlecap Library 
palette to the new document's Library palette. All four symbols move to 
the new document's Library palette because the Bottlecap Button symbol 
uses the Bottlecap, Spiral, and Spiral Animation symbols. Collapse the 
Bottlecap Library palette. 

You want the Up state of each bu 
for the button. You want that label 
cursor to the button. The easiest 
symbols based on the original that 
Click on the Bottlecap Button sy 
Duplicate from the Li, 
box appears. Name the 
the History Button symbo 






n m the navigation bar to display a label 
o disappear when the viewer moves the 
way to do this is to create additional button 
at contaifr me text label in the Up frame, 
mbel in the Library palette, and choose 
list. The Duplicate Symbol dialog 
ol History Button. Double-click on 
brary palette to view its Timeline. 



You will now add a^ft label to the button in the {4pS>ajnc. Create a new 
layer above the others called Text. Click on the Up frame in the Text 
layer. Using the Text tool, create a History label. Format the label using 
Arial, bold, 18 point, black text. Use the Info paiette to line up the His- 
tory label with the center of the button. ^Av)) 









Because you want the 

tton, you need to 
rame. Otherwise, the te 



disappear when the cursor is moved over the 
blank keyframe in the Text layer in the Over 
will stay visible within the other button states. 
Click on the 0\tr frame in the Text layer, and choose Insert — >Blank 
Keyframe. < /^M - ^^ 

Now that you have created the History Button symbol, you will create a Fla- 
vors Button symbol using the History Button as its basis. Click on the 
History Button symbol in the Library palette, and choose Duplicate 
from the Library drop-down list. In the Duplicate Symbol dialog box, 
name the symbol Flavors Button. 



Double-click on the Flavors Button symbol in the Library palette to 
view its Timeline. 



(Windows) 



To complete the Flavors button, you simply need to edit the History label in 
the Up frame of the Text layer. Click on the Up frame in the Text Layer. 
Select the History label, and change the text to Flavors. Make sure the 
center point of the text label lines up with the registration point. You 

have completed the Flavors Button. 

You will now create one more button symbol based on the History Button 
symbol. Duplicate the History button symbol once again. Name the sym- 
bol Merchandise Button. View the Merchandise Button symbol's 
Timeline. Change the label for the Merchandise Button in the Up frame 
of the Text layer to Merch. Make sure the center point of the text label 
lines up with the registration point. You have completed the Merchandise 
Button symbol. 



10. You will now place an instance of each of the button symbols you built on 
the Stage. View the main movie Timeline. Drag an instance of the Histos 
button to the Stage. Drag an instance of the Flavors and Merchandise^^ 
buttons to the Stage. 

11. Select the three button instances on the Stage, and use the Tra 
palette to scale them to 50%. 
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12. Arrange the button instances as shown below. (Hint: Use the Align pal- 
ette to align and distribute the buttons on the Stage.) 





Press [Ctrl] [Enter] to test the movie. Each button shows the its label in its 
a|e, the animated spiiul shape in its Over state, and the static spiral and 
gloisHh its Down stateMlJoJ);) the Preview window. 




ave the document, naming it Navigation, and placing it inside the 
lash MX Level 2 Data folder. 

Swapping Symbols 

In the Preloader Flash file, one animation has already been created. It is the 
graphic symbol Animated L that animates the letter L in Loading, using the L 
graphic symbol as its basis. As you learned before, graphic symbols may contain 
animation. The main difference between a graphic symbol's animation and a 
movie clip symbols' animation is that the movie clip's animation is independent 
of the main Timeline, while the graphic symbol's animation is subject to the main 
Timeline. If you do not want the animation to loop independently, a graphic sym- 
bol is often preferable. 
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You will now create additional movie clip symbols to animate the other charac- 
ters in the preloader animation. To do this, you do not have to create everything 
from scratch. Flash gives you the ability to quickly change the symbol or sym- 
bols that are used within another symbol. Because of this, you can simply 
duplicate and rename the Animated L graphic symbol, and then change the 
graphic symbol it uses as the basis of its animation. 



TASK 1 E-4: 

Using Symbol Swapping 

1. Open the Preloader Flash file inside the Flash MX Level 2 Data fold' 
View the document's Library. 

2. You will begin by examining the Animated L graphic symbol. Doi 
on the Animated L graphic symbol in the document's Library 
view its Timeline. 

3. The Animated L is in the center of the Stage. Click on the regist 
mark to select the L graphic symbol. By examining the Property 
you can see that the Animated L graphic symbol uses trie t^gra 
as its basis. You will now duplicate the Animated L grapl 
then in the duplicate, you will change the graphic symbol used as 

4. Making sure the Animated L graphic symbol is selected in the Library 
palette, choose Duplicate from the Library drop-down list. The Duplicate 
Symbol dialog box appears. Type Animated o in the Name field, make 
sure that the Graphic radio button is selectedf^ndcjicK OK. 

5. You now simply need to open the Anin^ate^o\gjarjMc/symbol you just cre^^ 
ated, and swap the L graphic symbol us^wHbin with the o graphic sy-^!^l/ 
Double-click the Animated o graphic symbol in the Library palette to 
view its Timeline. Click on the keyframe in frame 1 of the Text layer. 
Click on the selected text object on the Stage, and click Swap in the 
Property Inspector. The Swap Symbol dialog box appears. Click o in the 
symbol list, and click OK. The Animated o graphic symbol now uses the o 
graphic symbol as its basis. You can preview the animationo^clicking the 
Preview button in the Library window. Click the Preview button in the 
Library window. The animation plays. It now uses the o symbol 






Using the above 
of the remaining ci* 



Create a new 
place all the a 



animated graphic s; 
the word Loa< 




e Library palette 
aphic symbols yo 





to animate each 



animated Text and 
ited into the folder. 
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You want each of the animated graphic symbols to begin playing at a 
slightly different time to create a rippling effect. In general, you do not want 
to place multiple animated objects on the same layer in a Timeline, as this 
can severely slow down performance. Additionally, it is often easier to alter 
animations if each object is on a separate layer. You will now create a layer 
for each graphic symbol instance. View the main movie Timeline. Create a 
new layer, naming it L. Create additional layers, naming them o, a, d, i, 
n, and g. 







9 — ■ 


G? n 


* * Rp 




• • ■ f 




• • □ 




• * ■ 




• • □ f 


U) L 


• • ■ \ 






9. You will extend the Timeline for 
Drag in frame 25, from the top 
Frame. You have extenc 



ill of the lasers so that it spans 25 frames. 
pei«-te'the bottom, and choose Insert— > 

ir each layer to frame 25. 



10. You will now create keyframes<%r/6ajz!ri of the layers, so that the movie clips 
containing the animated text^s^noe /Staggered on the main Timeline. You 
already have a keyframe in frambvd of the L layer by default, so you will 
begin with the o layw./Create a keyframe in frame 3 of the o layer. Cre- 
ate a keyframe in frame 5 of the a layer. Continue creating keyframes in 
each layer two frames after the previous layer s keyframe. 




A yl. ■"'"Next you will copy and paste each of the letters in the word Loading cur- 
s. rently in Layer 1 into iis^bfrect layer, in the correct keyframe. Later, you 
\^>«ill swap those lettef^wiffl instances of the animated text. Click on the 
keyframe in frame 1 in the Layer 1 layer. Click on the L to select it. 
Choose Edit— >Cut. Click on the keyframe in frame 1 of the L layer. 
Choose Edit->Pssie in Place. 

12. Click on the o en the Stage to select it. Choose Edit— >Cut. Click on the 
keyframe in frame 3 of the o layer. Choose Edit— >Paste in Place. 
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13. 



Continue cutting and pasting in place to place all of the letters in the 
appropriate keyframe on the appropriate layers. Delete the Layer 1 
layer. 
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14. Now to complete the preloader, you are going to build, you will simply 
swap each of the static text symbols with the animated graphic symbols 
each keyframe. This will allow you to have the animated symbols position- 
exactly. Click on the keyframe in frame 1 of the L layer. Click on the 
letter L on the Stage to select it. Click Swap in the Property Inspector. 
The Swap Symbol dialog box appears. Choose Animated L in the Ani- 
mated Text folder in the symbol list and click OK. You have s 
static text instance with the animated instance. 

15. Swap each of the static graphic symbols for their anim 

You have completed the initial preloader animation. 



16. Press [Ctrl] [Enter] to test the movie and preview the animati 

17. Close the Preview window. 







18. Finally, you will copy the entire preloader anhh^tio^^ou^jast created to 
movie clip symbol, so that you can easily use it in anotlier Flash file. 
Choose Edit— ^Select All Frames. Choose Edit— ^Copy Frames. Create a 
new movie clip symbol called Loading Animation. Click on the first 
frame in the movie clip symbol's Timeline, and choose Edit— >Paste 
Frames. All of the layers and objects are pasted into the movie cli 
bol's Timeline, | (^^^ 

19. Save and close the Preloader file 




Summary 

In this lesson, you learned about the three symbol types and the best use of 
each one. You created graphic symbols for text and animation, movie clip 
symbols for independent animations, and button symbols to create naviga- 
tion controls. You learned how to use symbols within other symbols, and 
how to combine symbols and instances to create content, as well as to use 
the Library to organize symbols. 
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Lesson Review 



1 A What are the three types of symbols available in Flash? 

Graphic, movie clip, and button symbols. 

1 B How do you convert an object to a symbol in Flash? 




Select the object, and choose Insert^Convert to Symbolr~^\ 

1 C How does animation in a movie clip symbol differ from animation in a 
graphic symbol when viewed in the main movie Timeline? 

Animation in a movie clip symbol plays independently of the main Timeline, 
so the entire animation only uses one frameinHlw main Timeline. Animation 
in a graphic symbol is dependent onSfy&mmn Timeline, so if the main 
Timeline stops, or if there are not enough frames in the main Timeline, the 
graphic symbol's animation stops, c^weU^\/y 

1 D To add animation to a button's frame, what type of symbol do you need 
to use for the animation?^ / ^ 

A movie clip symbol. / \y / 

, E How 00 y „» re p,ace U^/o, one Symb „, ^ an n^nce „ f 
another in the main movie or within a symbol? 




Select the symbol yo 
Property Inspector. 





ap button in the 



Organizing Large Projects 



Overview 



In this lesson, you will use scenes and labels to organize larger and more 
extensive projects. Scenes allow you to divide long complex Timelines into 
manageable chunks. Labels let you refer to a frame by a name instead of a 
number, making it easier to keep track of critical points in your Timeline, 
and making it much easier to refer to those critical frames when using 
scripts in Flash. 





Objectives 




In order to more easily build and organize large projects, yo; 

2A Use scenes to organize content in large complex Timelines 

You will section long Timelines using scenes, keeping the Timeline from 
becoming unwieldy, and allowing you to build voir project in manage- 
able portions. 

2B Create frame labels. 

You will attach labels to frames to 
Timeline. 





>ata Files 

Scenes. f la 
New Flavors.fla 

Lesson Time 

30 minutes 
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Scenes 

Many of the projects you will create in Flash will be extensive. Often they will 
contain numerous interactive elements and independent animations, In addition, a 
Timeline that is built in a single linear fashion can often berameSinwieldy as it 
gets larger. ^ 



Flash offers a number of features and tools that allow 
large projects. Scenes provide a way to divide a 
able chunks. Instead of using one large single Ti 
project into individual scenes. 




u to effectively manage 
more manage- 
segment a 



You will divide a project into several scene^scr^triat ybu/6£n manage the overall 
project more easily. The project you will work with consists of several elements. 
First, is an animation using a binoculars mask, followed by the water scene you 
created earlier, followed by an opening page where 'viewers can navigate to vari- 
ous pages in a site. 

When you have multiple sections/in a^praje^^J/s much easier to divide the con- 
tent into scenes instead of stringing the content along one Timeline. By using 
scenes, you can build sections of your project, allowing you to build the portions 
of the project in any order, and make changes to those sections without affecting 



the others. 



;tio 



If you did not use scene/Awe Timeline's length would make it unwieldy to 
manage. In addition, yoiKmrklater add interactive elements co the project, allow- 
ing you to move to different areas of the main movie. In this case, it is easier to 



have the main Timet 
the main Timeline 

You will op 
single scene. 





to another scene instead of to a specific frame in 
tly. <^J/ 




_ lash movie that contains an animated layer mask in a 
en add a scene an^^fJbft content into the new scene. 




^/s^X^^ovie 




Open the Scenes.fla file inside the Flash MX Level 2 Data folder. This 
animation will be the first thing the viewer will encounter in the Flash 
ovie you are building. Currently, this file has one single scene. You will 
rename the scene ^anrn then will add another. To do this, you will use the 
Scene inspector Choose Window— >Scene to view the Scene inspector. 



cenes 






Double-click on Scene 1 in the Scene inspector to select its name. Type 
Binoculars and press [Enter]. 
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2. You will now add a second scene. Click the Add Scene button | + | in 
the Scene inspector. Change the new scene's name to Paddling. 




3. To move between scenes, you simply click on the scene in the Scene 
inspector. Click on the Binoculars scene in the Scene inspector. You are/^ 

now viewing the Binoculars scene. 

4. Click on the Paddling scene in the Scene inspector. You are viewing tf} 
Paddling scene's Timeline once again. Next you will copy the paddling 
scene's contents from the Water Scene Flash movie. 

5. Open the Water Scene.fla file in the Flash MX Level 2 Data f. 

6. Choose Edit— >Select All Frames. All of the frames in th 
the objects in the frames are selected. Choose Edit— >C 
the Water Scene file without saving the changes. 



7. Making sure that the Scenes file is active, and that Paddling is the cur- 
rent scene, click on the first frame in the Timeline, and choose Edit— > 
Paste Frames. Flash pastes the content into the Timeline, and imports the 
symbols used into the Library. 

8. Save the Scenes file and close it. 






Topic 2B 





Frame Labels 

As you build more complex projects thaTcbntain longer Timelines? it Soften dif- 
ficult to keep track of frame numbers, especially as you change the lengths of 
Timelines. For example, you may introduce' a new object on £pa5$S 150. However, 
if you later adjust the Timeline, \vhat waSon frame 150 ma^yvte^/ moved to a 
new frame number. Yoy/bafKadd labels to a frame that are attached to that frame, 
so even if the frame moves, the label will always be attached, and anything in the 
movie that refers to that laSei. /^\\ 

Additionally, when yofTJfe creating scripts within^eM^movies, it's often easier 
to refer to a meaningful name in the script than to a frame number which might 
mean little to someone examining or troubleshooting the script. You will now add 
labels to the New Flavors.fla file in order to make it easier to later create a 
preloader for toesfile.^y 

Xv 
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TASK 2B-1: 

Adding Labels to a Timeline 



Open the New Flavors.fla file located inside the Flash MX Level 2 Data 
folder. Add a layer called Actions/Labels, and make sure it is the top 
layer in the stacking order. 




You will add a Start label to the first frame in the Timeline. Later, when you 
insert frames at the beginning of the Timeline for a pie-loader, the Start label 
will consistently mark the beginning of the content currently in the movie. 
Click on frame 1 in the Actions/Labels layer. Type Start in the Label 
field in the Property Inspector, and press [Enter]. You have labeled frame 
1 Start. 



rr 





3. You will now create another label ^at ^he_phd'of the Timeline. When you 
want to create a new label, you need to create keyframe. Click on frame 
300 in the Labels/Actions layer, and choose Insert— ^Keyframe. Type End 
in the Label field in the Property Inspector. Later, you will use these 
labels as you insert a preloader animation into the Timeline. 

4. Save the New Flavors file and close it. 



Summa 





In this lesson, you worked with two techniques to help you manage large 
and complex projects: scenes and labels. You added a scene to an existing 
movie and imported content into that scene, allowing the movie Timeline to 
be divided into sections. In addition, you attached labels to frames in order 
to make it easier to refer to critical areas in a Timeline. 




.esson Review 




°A How do you create a new scene in a movie? 

Click the AdckSwme button in the Scene inspector. 

2B How do you label a frame in the Timeline? 



Select a frame, create a keyframe, and type a label in the Label field in the 
Property Inspector. 



Interactivity in Flash 




Overview 



In this lesson, you will add a number of interactive features to your Flash 
movies. You will provide non-linear playback of a movie and basic 
interactivity within a movie by adding the Go To, Load Movie, and Get 
URL actions to frames and buttons. You will also create more advanced 
interactive content including remote rollovers and expanding menus. Finally 
you will create a preloader to ensure smooth playback of larger moviessA 




Objectives 



In order to add non-linear playback and interactive features 
projects, you will: 



3A 






Provide non-linear playback capability to your Flash niovi 

You will attach the Go To and Load Movie actions to frames that have 
the movie go to specific frames and scenes in a movie, and to load exter 
nal movies that have already been created 




3B 



Add more advanced interactive elements to a Filash movie. 

You will create animated remote roilow^ahd^cjjstom expanding mi 
that will provide attractive and profe! 
Flash movies. 





active elements in/^Smsy 



>ata Files 

Scenes. f la 
Navigation.fla 
New Flavors.fla 
history.html 
flavors.html 
merchandise.html 

Lesson Time 

2 hours 
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Basic Playback Control 



Up to this point, you have created animations that are generally linear in nature, 
that run from start to finish with no interaction from the viewer . ^floX^vfer, in 
Flash, you can add interactivity to your movies, so that the viewer can control 
what goes on within the movie. Flash's capabilities for interactivity are practi- 
cally limitless. You can use Flash to create anything fro^n^m©yie\ where the 
viewer can control playback to advanced games, mzzl^s, \Q^ofi^erj applications. 

An action in Flash allows for non-linear playback and interactivity that makes 
Flash movies more than a linear presentation.^W^arNjjttksh an action to either 
an instance of a symbol, or to a frame. Fo^x1|mme>vyouN^m attach an action to 
the instance of a button symbol to have axtzbCtse crkkon the button send the 
viewer to another frame or scene in th|^rlKwik K or s to load a Web page. You can 
attach an action to a frame in order to cteateXworking preloader. But this is only 
the beginning of what you can do with Flash through actions. 





TASK 3A-1 



Using t 





Switching Scenes 

You will now connect scenes wnhin the Scenes.fla movie using the Go To action. 
You will add a Go To action to a frame to accomplish this. When the Timeline 
gets to that frame, the Go(Tj» action attached to it will ^gtx&iy 



me Action 




itch Scenes 



Open the Scenes document located inside the Flash MX Level 2 Data 
folder; Choose Binoculars from the Edit Scene drop-down list to view 




ars scene. 



ext you will add a 
dd a new layer callec 
stacking order. 



>r the actions and any labels you will add later. 
Actions/Labels, and place it at the top of the 



There is already a keyframe at the end of the scene. However, you need to 
add a keyframe to the last frame in the Timeline in the Actions/Labels layer. 
In order to add an action or a label to a frame, you should always add a 
keyframe to that frame in the correct layer. Add a keyframe to the last 
frame of the Timeline in the Actions/Labels layer. 



(Windows) 



4. Choose Window— >Actions to view the Actions palette. 




5. You will now add the Go To action to the frame. Making sure the 
keyframe you just created is selected, click on the Actions categot 
the Actions list to expand the list of available actions within tl 
category. Click on the Movie Control sub-category to 
necessary. 

6. Double-click on goto in the Actions list. The Go To 
the frame, and the action's settings now appear. 



• Actions - Frame 




( Anitm 




P Mo~CcMnl 




• *» 




• «• 








•9 stop 












(2| MtM*Ci*CONIOl 




*J VNUbfr* 




*J n«i M..OOM 














V 



Unel:goto»n*to><l)i 
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You will have this frame go to the first frame in the Paddling scene. Choose 
Paddling from the Scene drop-down list. Make sure that the value in the 
Frame field is 1, and that the Go To And Play radio button is selected. 




I(J Actions 

J] Movie Control 
® goto 
® o, 
® play 
® stop 

® stopAIISounds 
f*jl Browser/Network 
(J) Movie Clip Control 

® duplicateMovieClip 

® onChpEvent 



goto Co to the specified frame of the movie 

O Co to and Stb 



9 Go to and Play 
Scene Paddling 
Type: Frame Number 



Frame: :1 



Lin. 1. gotoAndPlay<-Paddlir,g-. II, 



8. Close the Actions palette. An a 

an action exists on that frame. 




in the frame, indicating that 





You have finished adding the Go To action to the frame. You will now pre- 
view the movie and see/Its operation. Press [Ctrl] [Enter] to view the 
movie. The Preview window appears. The Binoculars scene plays through 
once, followed by the Paddling scene. Because the Paddling scene is only 
one frame long, you do not seethe Paddling animation clearly. You will fix 
this in the next task^CJbse the Preview window. 

Loading External Movies (Qj 

Often complex projects are built in pieces. As youshave seen, you can copy 
frames, layer^^qfec^tsTarld symbols from ojKNiJw^e to another with relative 
ease. How^i^JL there^Irmy be times when $$we working with exported SWF 
files, and do not have access to the original FLA files, or you want to have mov- 
ies superimposed on each other. ^^-y 

ad one movie into another iising Flash's Load Movie action. When 
vie, the primary movie determines the size of the Stage, the Stage's 
olor, and the movie's frame rate. 



en you use the Load Movie action, you determine its location on the server by 
specifying the URL. In addition, you determine its level, which controls whether 
or not movies are superimposed on each other. 



The main movie is s 
loaded movie will 
into level 0 will 




vel 0. By loading a movie using a higher level, the 
top of the main movie. However, loading the movie 
the main movie, replacing it with the loaded movie. 



You will have a separate movie load into the Scenes movie. In this case, you will 
load the movie so that its Timeline replaces the current movie's Timeline. 
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TASK 3A-2: 

Using the Load Movie Action 




2. 



3. 



You will add a button to the Paddling scene that you will use to attach the 
LoadMovie action. However, you first need to add a Stop action to the 
single frame in the Paddling scene to have the playback pause at that frame. 
When you add a button to a frame, the main movie needs to stop so that the 
viewer can access the button. Choose Paddling from the Edit Scene drop- 
down list to view the Paddling scene. 

Create a new layer called Actions/Labels and place it at the top of the 
stacking order. Because this is the only frame in the scene, there is already-^ 
a keyframe by default. 

With frame 1 in the Actions/Labels layer selected, view the Ac 
palette. Double-click on Stop in the Movie Control sub-catego 
Actions category in the Actions list. There are no parameters for 
action, so it is complete. 





J"| Arttonf 
























* .-.1- 




Jl) t< it 




gj MM»Ct»COMIOl 




gj VMIIMK 





















4. You are ready to add a button tcrtije\cene. Create another layer called 
Button. Place the Button layer below the Actions/Labels layer hi the 
stacking order. You are noy^vj^wih^ pifc button symbol' s^s^line. 




In the Up frame, use the Rectangle tool to create a rectangle that mea- 
sures 50 pixels wide by 20 pixels tall, with its center point lined up with 
the registration point on the Stage. Fill the rectangle with a solid yellow 
colov«na^fttfve the stroke. 
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7. Create a new layer above the first one, and using the text tool, create a 
label for the button with the text Land Ho! Format the text as Arial, 10 
point, bold, black. Center the text over the rectangle. 



8. 



9. 



You will not create any visual feedback for the button, so you do not have to 
add anything for the other button frames. Navigate to the Paddling scene 
once again. Click on frame 1 in the Button layer, and place an instance 
of the Land Ho Button symbol near the top left corner of the Stage. 




You will now attach the LoadMovie action to the instance of the button. 
Making sure that the Land Ho Button instance is selected, choose 
Window— > Actions to view the Actions palette, if necessary. 

imjseject the Index category in the Actions list to view all of the avail- 
ions in Flash. The lisfrdispWys each action name, as well as the 
it resides in. Click on the Index category in the Actions list. 



?ate£ 





n the Actions list. The LoadMovie action is 



/^^l. Double-click on Loa 

^^^N^ttached to the butto 

You now need to/^sify the URL of the SWF file that you want to load. 
You cannot load native Flash files. Instead, you need to export a Flash file 
that you want|ONlse to a SWF file. When specifying the URL of the SWF 
file, you can use^tn absolute or relative URL. In this case, you can simply 
type the name of the SWF file since it is located in the same folder as the 
current movie. If you do use a relative URL, you need to be sure to maintain 
the same file structure when uploading to your Web server in order for the 
LoadMovie action to continue to work properly. Type main.swf in the URL 
field. 
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13. 



You want the movie level to remain at 0, because you want the main.swf 
Timeline to replace the current movie's Timeline. Make sure that 0 
appears in the Location field. 



- M 



Q LWIM.IM 

9 UPM.I 

9 lOMlUfl f llfYlll) 











DonlMad 






14. Close the Actions palette. 

15. Preview the movie, and click the Land Ho! button, 

button in the Paddling scene, the main.swf movie load; 



16. Close the Preview window. Close and save the Scenes file 



Web Navigation Controls 

Because your audience will primarily view your Flash content within a Web 
browser window, you can use Flash as a dynamic front end for accessing other 
Web content, whether it is on your site or olQ^^xreqialjsife. The Get URL^n. 
action allows you to specify an absolute or relative URL, as well as a targeCwiiiy 




dow, letting you control which files appear, and in which browser window thos 
files appear. 



You will add the Get URL action to 
document, having those buttons 
ally upload to your Web site. 




se 



u created in the 
TML files that you 



TASK 3A-3: <^ 

Attaching the Get URL Action to a Button 





1. Open the Na^ 



\a document. 




2. Click on the History button instance on the Stage, and choose 
Window— > A ctioifcs/ 

3. You "ban afcQesXa hierarchical list of actions by holding down the mouse but- 
ton on titesNeXv Item button(the plus sign). Choose Actions— >Browser/ 
Network— >GetURL from the Item drop-down list. The Get URL action is 
added, and the parameters for the action appear. 
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Just as when specifying the SWF in the LoadMovie action, you need to use 
the URL that will actually exist when you upload your files to your Web 
server. In addition, as with the LoadMovie action, you can use an absolute 
or relative URL. You will use a relative URL, and you will export this file 
as a SWF into the Website folder, where all of your Web-ready files are 
located. Because of this, the relative URL will simply be the name of the 
Web page that you want to link to. Type history.html in^eJJR^fteld. 

You can also select a target window for the linked URL. In this case, you 
want to have the URL open in a new browser window, so that^tije viewer 
can easily close it and return to the movie. Choose Biank from the Win- 
dow drop-down list. 




6. Attach a Get URL action to the Flavors button that points to the 
flavors.html pleTHaye\the URL open in a j^Ev^vindow. 
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7. Attach a Get URL action to the Merchandise button that points to the 
merchandise.html file. Have the URL open in a new window. 



MHom km two ftfuno* Ntm «Myx< pa m hw ai i BmuH 



a 

i) 



3 

3 Ot«MM 

3 OW"lW 



0 



9*1*11 ! 10 W* brow* to rwvipt* to fp« 




8. Because the URLs you used assume the final SWF file will be located i 
same folder as those HTML files, you will save a copy of the Navigation 
Flash file in the Website folder, as well. This way, when y/niytest the^muvn 
the URLs will operate properly. Choose File— >Save As. In the Save As dia 
log box, name the file Web Navigation, and place it in the Website folder 
inside the Flash MX Level 2 Data folder. 

9. You will now test the buttons. Press [Ctrl] [Enter] to preview the Flash 
movie. The Preview window appears. When you click on one of the buttons, 
your Web browser launches, displaying the linked page. 

10. Close the Web browser window, and close the Preview window, 




Topic 3B 



Creating Advanced Na 




/Controls ^ 

So far you have created simple navigation bars using only standaM bu 
Timelines and simple actions. You will now extend the principles you learned 
into creating more complex navigation elements, including animated remote 
rollovers and expanding me— 





0^ 

Using Button Eventsx^ 

As you have worked with buttons so far, you have used a button Timeline itself 
to create visual changes in the button based on the contents you have placed in 
each frame of :he button Timeline. 





Additionally, you can use button events to control scripts. However, generally you 
will not do this within the button symbol's Timeline. Instead, you will attach the 
script you w^rntQ^ an instance of the button, and select the button event or events 
that you want to trigger the script. 



When you are actually 
creating content for a Web 
site, you would not generally 
save your native Flash file 
inside the folder reserved for 
Web content. Instead, you 
would publish the file, 
placing only the SWF and 
companion HTML files in the 
Web content's folder. 
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You can click on a button 
instance to view the 
registration point to help you 
locate the center of an object 
when setting a guide. 



For example, you use a button symbol's Timeline to create a visual change to the 
button when the viewer moves the cursor over it by placing certain contents in 
the Over frame. To actually make something additional happen in the main 
Timeline when the viewer moves the cursor over the button, you attach a script to 
the Over button event for an instance of the button. 




button 
n in the 



It's important to remember that you generally reserve the conte 
symbol's Timeline only for visual changes to the button. To 
movie, you work with an instance of the button. 

You will now build a series of remote rollovers using the button s^yqy/ created in 
the Web Navigation document. While clicking on the button triggers the Get URL 
action for each button, you will have additional explanatory messages appear 
when the viewer moves the cursor over the button, and disappear when the 
viewer moves the cursor away from the buttotfN/ON. >v 



You will begin creating the remote rollovers b> 
animated messages that will appear when m«^ 
out of the same button. You will use 
animations can play within a single fra 





dually assembling each of the 
^the^ursor over each button and 
pis, because this way, those 
movie's Timeline. 



TASK 3B-1: 

Creating the Remote Rollover Movie Clip Symbols 



1. 



2. 




In order to make it easier to place and edit the remote rollover movie clip 
symbols on the Stage, you will place several guides on the Stage. Choose 
View— >Rulers. Now that you see the rulers, yous^^add guides to the 
Stage. You ad^a^g«Me\by dragging from the'Jtfrera 

You will create a horizontal ruler guide to line up with the vertical center of 
the History button. Position the cursor in the horizontal ruler. Drag down 
onto the Stage to create a horizontal guide, and release the mouse but- 
ton when the guide lines up with the vertical center of the History 
button. ) ) 

reate two more horizontal guides that line up with the vertical centers 
vors and Merchar<qjse buttons. 
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Create a vertical guide that lines up with the 250 pixel mark on the 
horizontal ruler. Choose View— >Guides— >Lock Guides. The design grid 
you created is now locked, so you will not inadvertently move the guides 
while you are positioning objects. 




You will first create the movie clip animation for the History message. Cre- 
ate a new movie clip symbol, and name it History Message. You are now 
viewing the movie clip symbol's Timeline. However, in order to build the 
animation, it will be easier to see what it looks like in the context of the 
main Timeline. To do this, you will use the Edit in Place option. 

View Scene 1. Drag an instance of the History Message movie clip 
bol to the right of the History button, releasing the mouse buttoi 
the top of the arrow cursor lines up with the intersection of the I 
tal and vertical guides. Making sure the instance is selected, choose 




Edit->Edit in Place. The butto 
the movie clip symbol's Timelin 
elements on the Stage. Ho 
bol can be edited. 




the Stage are dimmed. Yo.Osjjgp) viewing 
ut^pu are actually able ts> seesme other 
ments within fhe4wN£ clip sym- 



<s 




Using the Text tool, create a text object on the Stage containing the fol- 
lowing text: Click here to find out how Jammin ' Juice got started. Press 
[Enter] after the words "out" and "Juice" to create line breaks. Format 
the text as Arial, 12 point, bold. Make sure the color is set to black. 




Click here to find 
how Jammin' 
got started 




8. Y^will rtsw Convert the text to a graphic symbol. While you could build a 
motftwitwBe^Wng a standard text object, by creating a graphic symbol, you 
make it ea§ie^to re-use the animation within the movie clip symbol using 
another graphic symbol. Convert the text you just created to a graphic 
symbol called History Message Text. 



If you can not line up the 
movie clip symbol exactly 
with the guides using the 
mouse, simply use the arrow 
keys. 
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You are ready to use the History Message Text graphic symbol you created 
within a motion tween for the History Message movie clip symbol. For the 
motion tween, you will have the text move into place from above the Stage, 
fading in as it moves. Position the instance of the History Message Text 
graphic symbol so that its bottom edge lines up with the top edge of the 
Stage. Set the X value in the Info palette to 0. 



10. 



11. 



Click here to find out 
how JamrGrT Juice 



TNT 






Choose Alpha from the Color drc 
and use the Color slider to set tl 

text, and set the transparenc^to 0\tt < 
tween. 




list in the Property Inspector, 

You have positioned the 
al keyframe in the motion 



Next you will create 
keyframe in frai 
keyframe in frame 
of the History Mess 
Inspector to 





eyframe for the end of animation. Create a 
of the movie clip Timeline. Making sure that the 
elected, set the X and Y values of the instance 
t graphic symboyo^KUse the Property 
ha value to 100%.U 




lotion tween. Right-click in the Timeline 
and choose Create Motion Tween from the 

completed the motion tween for the History Mes- 



^KXYotTctre ready to create 
between the two keyftr 
s^\^sshortcut menu. Yotvha^ 

X. ^\^age movie clip symbbix" 

You now need to add a Stop action to frame 12 to keep the movie clip sym- 
bol from looping. Normally, you would create a separate layer for actions to 
make it easier to troubleshoot the Timeline, but in this case, you will simply 
add an action to the keyframe in frame 12 in the layer with the other 
content. Click on the keyframe on frame 12, and choose Edit— >Deselect 
All to make sure no objects are selected. Add a Stop action to frame 12 
using the Actions palette. 
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14. 



You will now build the other movie clip symbols to associate with the Fla- 
vors and Merchandise buttons by simply duplicating the History Message 
movie clip symbol, and altering the duplicates. As you do this, you will see 
how using symbols as the building blocks of your projects can really stream- 
line your work. Duplicate the History Message movie clip symbol, and 
name the duplicate symbol Flavors Message. 

To alter the Flavors Message movie clip symbol for use with the Flavors 
button, you need to do three things. First, you need to create a Flavors Mes- 
sage Text graphic symbol. Then you need move the initial position of the 
message object. Third, you need to swap the graphic symbol used in the 
animation. 



15. 



You can easily create the Flavors Message Text graphic symbol simply b 
duplicating and altering the History Message Text graphic symbol. Dup 
the History Message Text graphic symbol, and call the duplicate symb 
Flavors Message Text. Double-click on the Flavors Message Text symbol 
in the Library palette to view its Timeline. Using the Text tool, ch 
the text to: Click here to check out our newest flavor creations and you, 
old favorites. Press [Enter] after the words "out" and "creatio 
ate line breaks. 



16. 



17. 




Click here to check out j 
our newest flttvor creations 
and your old favorites i 




Reset the centerpoint of the text object so its X and Y values are 0. View 
the main movie Timeline once again. 





You will now alter the Flavors Message movie clip symbol. Once again, you 
will want to edit in place, so that you can visually position the start of the 
motion tween. Delete the instance of the History Message movie clip 
symbol. Drag an instance of the Flavors Message movie clip to the 
Stage, positioning it to the right of the Flavors button, lining it up with 
the intersection of the second horizontal guide and the vertical guide. 
Make sure you are lining up the registration point of the instance, and 
not the bounding box of the text object within the movie clip. Double- 
click on the registration point of ihe movie clip instance. Yo«^ar^)now 
editing the Flavors Message movie clip instance in place. 




18. You will now alter the initial position of the History Message Text graphic 
symbol, and you will then svyap it with an instance of<tqe Flavors Message 
Text symbol.Click on frame 1 in the Timeline, and click on the instance 
of the History Message Text graphic symbol on the Stage. Position the 
instance of the History Message Text graphic symbol so that its bottom 
edge lines up with the top edge of the Stage. Set the X value in the Info 
palette to 0. Click Swap in the Property Inspector. In the Swap Symbol 
dialog box, select Flavors Message Text from the symbol list and click 
OK. 

12 in the Timeline, and click on the instance of the His- 
t graphic symbol. Swap it with the Flavors Message 

movie clip animation is complete. 
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20. 



Finally, you will use the above steps to create Merchandise Message movie 
clip symbol, along with a Merchandise Message Text graphic symbol. Dupli- 
cate the History Message Text graphic symbol. Name the duplicate 
Merchandise Message Text. Change the text in the symbol to the follow- 
ing: Click here to check out our latest Jammin' Juice hats, beach towels, 
and coolers. Press [Enter] after the words "out" and "Juice" to create 
line breaks. 



Click here to check out 




21. 



Duplicate the History Message movie clip symbol. Name the duplicate 
Merchandise Message. View the main movie Timeline. Delete the 
instance of the Flavors Message movie clip symbol. Place an instance of 
the Merchandise Message movie clip symbol on the Stage, lining up its 
registration point with the intersection of the bottom horizontal guide 
and the vertical guide. 




22. Edit in place, and position the text object in the frame 1 so its bottom 
edge lines up with the top edge of the Stage. Use the Property Inspector 
to swap the History Message Text graphic symbol instances in frames 1 
and 12 with the Merchandise Message Text graphic symbol. 

23. Because you only placed the instances of the movie clip symbols on the 
Stage to help you position the animations within those symbols, you will 
remove the instancesffr; 
Remove any of tl 



24. Save the file 





m the Stage. View the main<m«$e Timeline, 
sage movie clip instances from the Stage. 





Remote Rollovers 

Now thayypu/nave icreat 



ated the objects you will use for the remote rollovers, you 
will now set up the rollovers using various actions assigned to button events. 



smevrraiote rollover movie clips appear based on the mouse events, you 
will crbate s S^veral additional keyframes. Each frame will contain one of the 
remote rollover movie clips. Additionally, you will add Stop actions to the frames 
ihat the main movie Timeline pauses on that frame, allowing movie clip 
stances to play through, J) 
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TASK 3B-2: 

Setting up Remote Rollovers Using Button Events 

1. You will have a separate layer for frame labels and actions in the Timeline, 
and one for the rollover movie clips. Keeping things in separate layers 
makes it much easier to troubleshoot when building a complex Timeline. 
Create two new layers. Name the top layer Labels/ Actions. Name the 
middle layer Remote Rollovers. Name the original layer 1 Buttons. 




5. 



9. 



10. 



a 3 □ | 


G? Labels/Ac... 


• • □ 1 


0 Remote R... 


• • □ i 



2. You will begin by creating a Stop action on frame 1. You need to do th 
because the movie needs to pause on frame 1 so the viewer can aas^ss s tne 
rollover buttons. Click on frame 1 in the Labels/Actions layer, and choose 
Window— >Actions to view the Actions palette. Choose Edit— >Deselect All 
to make sure that no objects are selected. 

3. Add a Stop action to the frame. 



4. 






You will now add another keyframe in the Labels/Actions layer. You will 
label the frame, and add a Stop action to it, as well. 4dd a keyframe to the 
Labels/Actions layer in frame 2. Type HistoryOver in the Label field in 
the Property Inspector. Add a Stop action to tb 




Add a keyframe to frame the Labels/Actions layer in frame 3. 
frame FlavorsOver. Add a Stop action to the fraim. J 



Label the/P/S> 



Add a keyframe to frame the Labels/ Actions layer in frame 4. Labei the 
frame MerchOver. Add a Stop action to the frame. 

You will also add keyframes to the (Remote\Rpllovers layers. RerrSsjH^ that 
whenever you are changing the c^mt&ntfhof a layer from one fra^c^to 
another, you should add a keyframeS3®tr j will have a different mqvije clip in 
each of the keyframes in the Remote Rollovers layer, and a different action 
assigned to the buttons in / e^b/framp' <Sf the Buttons layer. Add keyframes 
to frames 2, 3, and 4 in the Remote Rollovers layer. 

Now that the keyfi^h^ar^et ap, you can add the ajpgreffriate movie clip 
instances to each of the keyframes. In the Remote Rollovers layer of 
frame 2, add an instance of the History Message movie clip symbol. 
Position its registration point at the intersection of the vertical guide and 
the top horizontal guide. 

overs layer of frame 3, add an instance of the Flavors 
vie clip symbol. Position its registration point at the inter- 
ertical guide and the second horizontal guide. 

In the Remote Rollovers layer of frame 4, add an instance of the Mer- 
chandise Message movie clip symbol. Position its registration point at 
the intersection of the vertical guide and the bottom horizontal guide. 
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11. You are now ready to create the button events to trigger the rollovers. How- 
ever, you will remove the existing actions from the buttons in frame 1, 
because you will assign those actions in other keyframes.Move the 
playhead to frame 1, and click on the History button to select it. Make 
sure no other objects are selected, and choose Window— >Actions if the 
Actions palette is not visible. 



12. 



13. 



14. 



15. 



Click on the onRelease line in the History button script in the Actions 
palette, and click the Delete Action button. There are rqw^ro actions cur- 
rently attached to the History button. 

Remove the getURL item from the FlavorAandM^rch^n^jse buttons in 
frame 1. 

Next you will create keyframes in frameSs2, 3£anas4 r£ the Buttons layer, so 
that you can assign various actions t^ac^frame^&ybutton set. By creating 
keyframes in advance of adding scripts to me btrttOHS, you are creating a 
separate series of buttons for each keyframe. Add keyframes to frames 2, 
3, and 4 in the Buttons layer. 

You will now add a Go To/action lo me_HisJory button in frame 1 , triggered 
when the viewer moves the /CursOK over the button. You want the Go To 
action to move the playhea^j0 we HistoryOver frame which contains the 
History Message movieelip. Move the playhead to frame 1, and click on 
the History button to select it. Make sure no other objects are selected. 
Hold down the mouse button on the Add Item button in the Actions 
palette. A drop-down list appears, allowing you tp/s^bt/an action. Choose 
Actions— >Mo vie Control— >GoTo from the Item drop- down list. The 
parameters of the Go To action appear. Choose Frame Label from the 
Type drop-down list. Choose HistoryOver from the Frame drop-down 
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16. 



The default mouse event for a Go To action attached to a button is Release, 
which occurs when the viewer clicks on the button, and then releases the 
mouse button. In this case, you want the Go To action triggered by the 
RollOver mouse event. Click on the on (release) line (just above the 
gotoAndPlay line in the script) to select it. You now see the various mouse 
events that you can attach to the item in the script. Uncheck the Release 
checkbox, and check the Roll Over checkbox. 
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You have changed the mouse event associated with the action. 




17. Next you will set up what happens when the viewer clicks on the button. 
You will use the Get URL action to have a Web page open in a new 
window. However, you will attach this action to the button in the 
HistoryOver frame, which is where the playhead currently would be in the 
Timeline. Click on the keyframe in the Buttons iayer of frame 2. Click 
on a blank area of the Stage to deselect all items, and click on the His- 
tory button to select it. Choose Actions— >Brcwser/Network—>GetURL 
from the Item drop-down list in the Actions palette. Set the URL to 
history.html. Choose Blank from the Window drop-down list. Make sure 
the mouse event is set to Release. / /"-^ /\ 
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18. You will also add another action to the script for the History button in this 
frame. When the viewer rolls away from the button, or releases the button, 
you want to return to the first frame in the Timeline. This way, the naviga- 
tion bar resets. Making sure that the keyframe in the Buttons layer of 
frame 2 is still selected, and that the History button is still selected, click 
on a blank area in the script window in the Actions palette. You want to 
make sure you are adding a completely new action, and not attaching an 
action to the same mouse event. Use the Item drop-down list to add a Go 
To action which goes to frame 1. Set the action to trigger on both the 
Release and Roll Out events. / / 
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19. You will now set up ihe actions for the Flavors button. Click on the 

keyframe in the Buttons layer of frame 1, and select the Flavors button. 
Make sure no other objects are selected. Add a Go To action to go to the 
frame labeled FlaversOver, triggered by the RoilOver mouse event. 
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20 



Click on the keyframe in the Buttons layer of frame 3 (the FlavorsOver 
frame), and select the Flavors button. Add a Get URL action to the Fla- 
vors button. Set the URL to flavors.html and choose Blank from the 
Window drop-down list. Make sure the mouse event is set to Release. 
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22. 



You will now set up the actions for the Merchandise button. Click on the 
keyframe in the Buttons layer of frame 1, and select the Merchandise 
button. Add a Go To action to go to the frame labeled MerchOver, trig- 
gered by the RollOver mouse event. 




23. 



24. 



Click on the keyframe in/^he* Buttons layer of frame 4 (the MerchOver 
frame), and select the Merchandise button. Add a Get URL action. Set 
the URL to merchandjse.html and choose Blank from the Window drop- 
down list. Make sure the mouse event is set to Release. 

Add a Go To action which goes to frame 1. Set the action to trigger on 
both the Release and Roll Out events. Make sure the Go To action is not 
linked to the same mouse event as the Get URL action. 




You will now save the file inside the Website folder, and then test the movie. 
Choose File— > Save As. Name the file Advanced Web Navigation, and 
save it inside the Website folder inside the Flash MX Level 2 Data 
folder. Preview the movie. Flash creates a SWF file inside the Web folder. 
Move the cursor over each of the buttons, and click on each of them. 

26. Return to Flash. Close the Preview window. Close the 
Advanced Web Navigation file. 
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Expanding Menus 

You can create even more elaborate navigation controls by combining buttons and 
movie clips. By using the Track as Menu Item option, you can use button and 
movie clip symbols to assemble expanding menus, providing an elegant interface 
for your viewers to interact with the Flash content. 

You will create an now create an expanding menu that you could use for naviga- 
tion to other areas of your Flash movie or to access external Web pages. 




TASK 3B-3: 



Creating an Expanding Menu 

1. Create a new Flash file. 

2. Create a new button symbol named Flavors Menu Button. 

3. In the Up frame of the Flavors Menu Button Timeline, use the text t 
to create a "Flavors" text label. Format the label as Aria!, 18 poi 
bold, black text. Position the label so its center lines up with the regis 
tration point. 



7. 



8. 





Create a keyframe in the Over frame. Change the text for 
frame to red. 



The contents of the Hit frame in a button determine the hot area of the but- 
ton, which is the area that actually responds to^fnou^esevsrjts. When a button^ 
consists only of text, the spaces between the characters and within the char- 
acters themselves would make it more difficult fbi^Ije viewer to interact wnhc- 

usls the Hullo n would not react io ^/^ 




that button, because wherever a space fexis*t^tnfe4aitton would not reactC 
mouse event. By placing an object in the Hit frame, you control what are 
the button is interactive. You will add a rectangle chat surrounds theH^K 
labels in the Up and Over frames, so me emue area of the text wi^reafct to 
mouse events. Create a keyframe in the Hit frame. Draw a reeiangl 
filled with a solid color the size of the hounding box around the text, 
and remove the stroke. It doesn^marter what color the filVM the"- shape is 
in the Hit frame, as long as it's a solid color. Drag the text object from 
under the rectangle shape, and delete it. Make sure the center of the 
rectangle lines up with the registration point. 



6. You will now create the actual expanding menu movr 




Create a new 



movie clip symbol^ncK{iam^ it Flavors Menu, 



In the Flavors Menu movie clip symbol's Timeline, create two additional 
layers. Name the top layer Labels/Actions, the middle layer Menu, and 



the bottom layer Menu Close. 

There are already keyframes in frame 1 by default. You will also create 
keyframci^ihsfrane 2 for each of the layers. Create keyframes in frame 2 
for all three layers. 

Next you will label the keyframes, so it will be easier to set up the actions 
you will use. Create a label in the Labels/Actions layer in frame 1 called 
Hide. 
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10. Create a label in the Labels/Actions layer in frame 2 called Show. 

11. Place a Stop action in frames 1 and 2 in the Labels/Actions layer. 

12. Select the keyframe in the Menu layer in frame 1. Add an instance of 
the Flavors Menu Button to the Stage, and line up its center point with 
the registration point on the Stage. 



13. With the Flavors Menu Button instance selected, chc 
Item from the Track menu in the Property Inspec 



14. 



15. 



16. 



18. 



f t.,--f, v *'ttt>->,u r w:«fM.t,ifi r ,-fi 
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s Menu 



You will now duplicate the Flavors Menu Button symbol several times, and 
then alter the text within it. This wiil allow you to quickly build the items in 
the sub-menu. Duplicate the Flavors Menu Button symbol in the Library 
window. Name the duplicate symbol Mango Tango. View the Mango 
Tango button symbol's Timeline. Change the text objects in the Up and 
Over frames of the Mango Tango symbol to Mango Tango and make 
sure the text lines up with the registration point. Adjust the rectangle in 
the Hit frame to match the size of the Mango Tango text. (Hint: You can 
view the width and height of the text object in the Up or Over frame 
using the Info palette, and enter those values for the Hit frame. 

Create another duplicate of the Flavors Menu Button symbol called 
Grape Escape. View the Grape Escape button symbol's Timeline. Change 
the text objects in the Up and Over frames of the Grape Escape symbol 
to Grape Escape and make sure the text lines up with the registration 
point. Adjust the rectangle in the Hit frame tc match the size of the 
Escape text. 



Grape 



labors Menu Button symbol called 
inge button symbol's Timeline. 





Create oi;e more duplicate of the 
Apple vs Orange. View the Apple vs 

Change the text objects in the Up and Over frames of the Apple vs 

range symbol to Apple vs Or ange and make sure the text lines up with 
the registration point. Adjust the rectangle in the Hit frame to match the 
ize of the Apple vs Orange text. 

ill now assemble^^^panded menu. View the Flavors Menu movie 
clip symbol's Timeline. Select the keyframe in the Menu layer in frame 

Add an instance of the Flavors Menu button to the Stage, lining up its 
center point with the registration point. 

Add instances of the Mango Tango, Grape Escape, and Apple vs Orange 
symbols to the Stage, positioned as shown. Make sure there is no space 
between the bounding boxes of the instances. You can [Shift]-click on the 
menu items to view their bounding boxes, to make sure that the symbol 
instances line up, and that there is no space between the instances. This will 
be critical for the proper functioning of the menu. 



Flavors 


Mangc&Tango 






Grape Escape 


Apple vff Orange 



19. 



20. 



You have finished creating the expanded menu. Next you will set up the 
menu so it will close. Select the keyframe in frame 1 of the Menu layer. 
Select the Flavors Menu Button instance, and add a Go To action that 
goes to the Show label. Have the action triggered by the Roll Over 
mouse event. 



21. 



22. 



23. 
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Select the keyframe in the Menu Close layer in frame 2, Draw a re<_ 
angle that surrounds the entire expanded menu. Make sure that the 
rectangle is filled with a solid fill color, and remove the stroke around 
the rectangle, 




Flavors Mango Tango 
Grape Escape 
Apple vs Orange 






Paste 

cre- 



Select the rectangle, and convert it to a button symbol named Close 
Menu. View the Close Menu button sj^b^K^TOneline. ^^^^ 

You will only set up a Hit frame forthE~witt»n to have it act as a trigger. 
Select the filled rectangle in the Up frame of the button and 
Edit— >Cut. Create a keyframe in the Hit frame, and choose 
in Place. Now the only content s bf s mfev|)utton is in the Hit framed 
ates an invisible button. 

View the Flavors Menu A J^vie N clip--Timeline, once ag^^^Jelect the 
instance of the Close Menu button symbol in the Close Menu layer in 
frame 2. Choose Track as Menu Item from the Track drop-down list in 
the Property Inspeclo*^\yv 







Lesson 3: Interactivity in Flash 




24. With the Close Menu button instance still selected, add a Go To action 
to go to the Hide label. Set the mouse event that triggers the action to 
Roll Over. 



25. 



26. 




Because the Menu Close instance ns ^aSaye^ below the menu item button 
instance, the button instanc^^bove WlljAdck the Roll Over event in the 
Close Menu button from occurring unless the viewer rolls over a portion of 
the Close Menu rectangle 'hat/istrt covered by one of the menu items. 

Finally, you will add a Get URL action to each of the buttons in the 
submenu. You will have each button link to an imag^jiOthe browser 
window. The images are located inside the flavors J^jcteq^nside the Website 
folder. When you gaveVand publish the file, the SWF will be inside the 
Website folder. So to N aQce"ss the flavors images, w^T^eed to use the relative 
URL, which indydevlhe flavors directory. Select the Mango Tango menu 
button. Attach a Get URL action to the button. Type flavors/ 

in the URL field in the Actions palette. Choose Blank 
J - op-down list. Have the action triggered by the 
t. 



ape Escape button instance. Type 
d in the Actions palette. Choose 
list. Have the action triggered by 



mango 
from 




the Reiea; 



URL action to the 
cape.jpg in the 
the Window dro 
se mouse event 





Attach a Get URL action to the Apple vs Orange button instance. Type 
flavorsforangevsapple.jpg in the URL field in the Actions palette. Choose 
Blank from the Window drop-down list. Have the action triggered by 
he Release mouse event. 

^ \ y (r\ 

28. Save the file. Name it Menu.fla and place it in the Website folder inside 
the Flash M^E^el 2 Data folder. 

You will now place an instance of the Flavors Menu movie clip symbol on 
the Stage.View the main movie Timeline. Drag an instance of the Flavors 
Menu movie clip symbol to the Stage. Save the file, then preview the 
movie, and test the menu. 

30. Close the Menu document. 
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Preloaders 



The export format for Flash, SWF, is a streaming file format. The contents of 
each frame in the movie are downloaded to the viewer's computer sequentially. 
What this means is that the file can begin playing before the entire file is 
downloaded. While streaming is an advantage, sometimes interruptions in play- 
back can occur. If the file is being streamed, and a frame is encountered that 
contains a lot of data (a bitmap graphic or a sound, for example), the playback 
will stall while that information is downloaded. 

In order to ensure smooth playback, often Flash designers often specify that a 
certain portion of the file load before playback begins. The easiest way to do this 
is to use an If Frame is Loaded action. With this action, you can specify that 
frames containing the most data load completely before playback of the file 
begins. 

Larger SWF files can take significant time to download, especially with slower 
dial-up connections. Because the If Frame is Loaded action prevents the file from 
beginning playback until certain frames are completely downloaded, wit 
preloader, the viewer will be waiting with no indication that anything is 
happening. This is why many Flash designers create a preloader 
conjunction with the If Frame is Loaded action, to let the viewer 
file is downloading. 

You will use the preloader sequence that you created earlier Is^conjunction/with 
the If Frame is Loaded action to make sure that a large file plays back smoothly. 
You will work with the New Flavors.fla file, which contains background music 
and several background graphics. Because the file is so large, those viewers using 
low bandwidth connections could potentially experience interrupted playback. 





Therefore, you will create a preloader sequence, and 
action to make sure that playback doesn't begin until, 
is loaded. 



TASK 3B-4: 

Creating a Preloader 



1. Open the New Flavors.fla 
folder. Earlier you create* 
label at that first frame 




the If Frame is Loaded 
last frame of the movie 





located in the Flash MX 

'ei tor actions and labels 
\e Timeline, and an End lab 




2 Data 

ced a Start 
last frame. 



You will now insert ah Additional frame that will contain the preloader. 
Because the preloaderNi^jN^ipvfe clip symbol, it willoniy need one frame to 
run, since its animation is independent of the main Timeline. Choose Edit— > 
Select All Frames. Position the cursor on one of the selected frames, and 
drag to the right one frame. 





Flash inserts a blank keyframe in frame 1 of all of the layers. In addition, 
the labels moved along with the existing frames, so the Start label now 
refers to frame 2, and the End label refers to frame 301. 



When using labels to build a 
preloader it is easier to use 
the if Frame is Loaded 
action, since you can refer to 
frame labels within the 
action's parameters. 
However, the action is being 
deprecated after Flash 6, so 
you should generally use the 
framesloaded property 
instead. 



Select the keyframe in frame 1 of the Labels/Actions layer, and add a 
Preloader label. 

Next you will import the preloader animation from the Preloader Flash file. 
Choose File— >Open as Library, and select the Preloader file, located 
inside the Flash MX Level 2 Data folder. 



p^a^a^^tar 



Select the keyframe in frame 1 of the Flavors layer. Drag an instance of 
the Loading Animation movie clip symbol from the Preloader Library 
palette to the Stage. All of the symbols associated wrrhsh^jrepoader ani- 
mation are imported into the New Flavors file. / s v \ 



6. 



You will now set up the preloader. To do tm§£ 
Animation movie clip symbol continue 
Flavors scene loads. You do not want tt 
until the last frame in the Timeline is 
check to make sure the last frame 
the Start label. Select the keyfrar 
layer. View the Actions palette. 



7. 



Choose Actions— >Conditiens/Loo 



y fenons loi Film l lUMM P*toM«| of Li«m)H|w toob^lLjpik 




will haye the Loading 
ikpwT last frame in the 
e£d to the Start label 
1 create a script to 
ded before moving to 
the Labels/Actions 



m the Actions drop-down list. 





CO. 




e Condition field is now available. 



Properties— >_framesiesided from the Actions drop-down list. The 

framesloaded is added to the Condition field. You want the condition to 
specify that the last frame in the movie is loaded. 
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9. 



Choose Operators— Comparison Operators— »= from the Actions drop- 
down list. Choose Properties— >_totalframes from the Actions drop-down 
list. 



10. 



11. 





PtaM*tiP. 




<*- • • |mJ J.|_„ j 




9 _qw*9 









You have completed the condition statement. Next you will 
happens if the condition is true. If the frames loaded is at/e; 
total frames in the movie (in other words, the entire mo 
want the playhead to begin playing at the Start label 

Choose Actions— >Movie Control— >goto from the Actions drop-down list. 
Choose Frame Label from the Type drop-down list. Choose Start from 
the Frame drop-down list. Make sure the Go to and Play radio button is 
selected. \. 






>0 (f^\ 

You have completed the pre loader. In order to test it, you will test the 
movie, as you na^e'aor.e before. However, b^rati^e the file currently resides 
on your hard disk, simply testing the movie would load the entire file imme- 
diately, an/f"wuN4wldn t be able to see if the preloader is working correctly. 
In order to see the preloader actually working, you need to simulate an 
actual slow download, which you can do while testing the movie. Choose 
Control ->Test Movie. The movie begins playing immediately. You will 
simulate a slower download. 
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12. Choose Debug— >56K. Choose View— >Show Streaming. You now see the 

preloader running while the movie downloads, as it would if you were using 
a 56K connection. 



13. Close the Preview window and save the New Flavors file. 



Summary 




In this lesson, you provided the ability for your movies to play in a non- 
linear fashion. Next you created simple navigation controls that allowed the 
viewer to move to various parts of a movie or to external Web resources. 
You then created advanced interactive elements, including animated remote 
rollover, and expanding menus. Finally, you created a preloader sequence 
that provided smooth playback for large Flash files over slow connections. 



Lesson Review 



3A What action do you use 
another? 




ovie move from one scene to 



You use a Go To action, specifying that the movie 




the new scene. 



3B Which action do you use to allow the user to access external Web pages 
from inside your Flash movie? 

7,, cm D) 

I he Get URL action. \>\ 




Working with Sound 



Overview 



In this lesson, you will import sounds into a movie, and will add sounds 
movie clip and button Timelines. You will then edit and apply effects to 
sounds to fine tune them for your project. 




Objectives 



In order to work with sound in your projects, you will: 

4A Import sounds into a project. 

You will import sounds into your movies and add tl^se^spunds t(/irames 
in the main movie Timeline, and to frames in button and movie clip sym- 
bol Timelines. 




4B Work with sound properties. 

You will work with sound properties, edit your 
effects to fine-tune sounds for your projects. 



nd apply fade ^^""^ 





jata Files 

Scenes. f la 
Advanced Web 
Navigation.fla 
Calypso.mp3 
Paddle.wav 
Pour.wav 

Lesson Time 

45 minutes 




Lesson 4: Working with Sound 




Topic 4A 

Importing Sounds 



Adding sound to a Flash movie can create professional flair to /our* presentation, 
giving the viewer a more immersive experience with the content of your movie. 
There are many ways you can integrate sound into your projects. You can have 




they are navigat- 
jnds or 



short sounds attached to buttons to give the viewer feedba 
ing through your content. Further, you can create back^ 
soundtrack music. You can even layer narration into yc 

In order to add a sound to your movie, you need to import it into the Flash file. 
You can then add the sound to a frame. You v/iil begin by opening the Scenes. fla 
file. You will import a sound into the file that j^oyi wi^l evBMxually use with the 
paddling animation. 



\§5 TASK4A-1 




Importing Sounds 




em to the Timeline 



View 




Open the Scenes.fla file located inside the Flash MX Level 2 Data folder, 
and view the Paddling scene. 

You will now add the Paddling sound to the movtuf^hd will place the sound 
in the Timeline. Choose File— >Import. The ImpoTt dialog box appears. 
Select the Paddle.wav file inside the Sounds foifter inside the 
Flash MX L/v^TBatji folder, and click 

the library. Tlhe^Paddle.wav file hq^^^h added to the Library. You 
will now place it in the Paddling scene. However, you want it to be part of 
the Paddling movie clip symbol so that i<: will play along with each repeti- 
tion of the looping movie clip. <^\\) 

Double-click on the Paddling movie clip symbol in the Library window 
open its Timeline. /> 

si new layer in the Paddling Animation Timeline called Sound, 
lake sure that it^isHhMop layer. 

Jlick on frame 1 in the Sound layer, and drag the Paddle.wav file from 
the Library window to the Stage. Release the mouse button anywhere on 
the Stage. 

The sound is added to the Timeline. 





t 5 10 















When you are adding a sound to the Timeline, you do not have to place the 
sound in any particular place on the Stage. You have added the sound to the 
Timeline. However, to hear its effect, you need to preview the scene. 
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7. Click on the Paddling scene in the information bar. Choose Control— > 
Test Scene. The Paddling animation loops, with the sound playing once each 
time the movie clip loops. 

8. Close the Preview window. Close and save the Scenes movie. 



Button States with Sound 

In the previous task, you added a sound to the beginning of a Timeline so that it 
played during the playback of the movie clip symbol instance's Timeline. How- 
ever, you can also associate sounds with frames in button states in order to 
enhance the effect of a navigation bar. 

You will assign a sound to the Over state of the buttons in the 
Advanced Navigation.fla file. 



TASK 4A-2: 

Associating Sounds with Frames 

1. Open the Advanced Web Navigation.fla file located 
inside the Flash MX Level 2 Data folder. 

2. You will begin by adding the Pour sound to the Over state of the History 
Button symbol. When assigning sounds to a button frame, you need to work 
with the actual button symbol, and not an instance-^iTcKblrrton. Double-click 

Cttfexto^op 

3. Create a new layer called Sounds, and make^urcft is the top layer^ 

4. Create a keyframe in the Over frame of the Timeline in the Soi 
layer. 
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5. Choose File— >I 
sound inside t 

The Pour soun 



6. 



Making 
Pour s< 




In the Import dialog b 
folder inside the 

o the Library. 





ect the Pour.wav 
Level 2 Data folder. 



ver frame is selected in the Sounds layer, drag the 
tage. 
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7. 



Choose Event from the Sync drop-down list in the Property Inspector, if 
necessary. 



f^t^ f ■ Fib 



8. 



9. 



Using the above steps, add the Pour sound to the Ove 
vors and Merchandise buttons. 




the Fla- 



You will now preview the movie. Press [Ctrl] [Enter] to tesl the movie. 
Move the cursor over each button. As you move the cursor over each but- 
ton, the Pour sound plays in its entirety. YbwVould like the Pour sound to 
stop when the viewer moves the cursor, awy from a"button. You will fix that 
in the next task. 



10. Close the Preview window. Save 





Event vs. Streaming Sounds 

There are two basic typejsjofc sounds in Flash: event souH^^^streaming sounds. 
Event sounds must be entirely downloaded before they can begin playing, while 
streaming sounds can begin playing as soon as there is enough information for 
the sound to begin playing. NX 




Further, event and streaming sounds differ in how they play back within the 
Timeline. Streaming sounds are designed to be synchronized with the Timeline, 
but event sounds play independently of the Timeline. An event sound will play 
through its entire duration until it is specifically told to stop. 



Finally, event and streaming sounds differ in their intended use. You use event 
sounds foX^srlort^sortinds associated wffi^Tents like button states. You use stream- 
ing sounds for longer sounds like background music and narration. 




You will now add background music to the Advanced Navigation movie. In addi 
iprhsVoVwill set up the buttons so that the Pour sound stops playing when you 



ick a particular button 




TASK 4B-1 : 

Controlling Event and Streaming Sounds 

1. Import the Calypso sound located in the Sounds folder inside the 
Flash MX Level 2 Data folder. 



You will have the Calypso sound play as background music. However, you 
can't simply place the sound on the first frame of the Timeline. The reason 
why is that a streaming sound must actually have enough frames in the 
Timeline to play. Since there is a Stop action in the first frame to keep the 



4. 



5. 



6. 



buttons visible, only one frame of the music would actually play. The solu- 
tion to this is to place the Calypso sound inside its own movie clip symbol, 
which you can then place on the first frame in its own layer. Remember that 
a movie clip symbol plays independently of the main Timeline, so as long as 
there is nothing specifically stopping the movie clip symbol from playing or 
being removed from the Timeline, it will play in its entirety. 

Create a new movie clip symbol called Music. View the Music movie clip 
symbol's Timeline. 

With frame 1 selected, drag the Calypso sound file from the Library 
palette to the Stage. 

Next you need to set the Sync option to Stream. With frame 1 selected in. 
the Timeline, choose Stream from the Sync drop-down list in the Prop- 
erty Inspector. The Stream option allows the sound to start playing before it 
is fully downloaded. This is usually the best option to use when ths^soi^ais^ 
not associated with a particular event in the Timeline. 





Next you need to extend the Timeline of the movie clip symbol out so there 
are enough frames for the entire music clip to play. Click on frame 
and choose Insert— >Frame. The movie clip's Timeline is extended approxi- 
mately to the length of the music clip. 




You will now place an instance of the Music movie clip on the main 
Timeline. View the main movie Timeline. Create a new layer called 
Music. Making sure that frame 1 of the Music layer is selected, drag an 
instance of the Music movie clip symbol to the 




Test the movie. The background music playsy^^otrwJvfe the cursor over/^ 
each button, the Pour sound plays. However, when you click on a button, thk\^ 
Pour sound does not stop playing. You will now fix this by working with the 
Down frame in the Bottlecap button symbol. Close the Preview window. 




You will begin by changing the His 
Button symbol's Timeline. Add a 
Sound layer. 



9. In the Property Inspector, 
Choose Stop from the Syi 




:on symbol. Open the History 
e to the Down frame 



from the Sound drop-down list, 
list. 



Now when you click on a button, the Pour s 



ill stop playing. 



10. Using the above steps, add the Stop sync option for the Pour sound to 
the Down frame of the Flavors and Merchandise buttons. 
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11. Preview the movie once again, and test the buttons. The sounds in the 
movie all now work properly. The background music plays. When you move 
the cursor over a button, the Pour sound plays. When you click on a button, 
the Pour sound stops playing. 

12. Close the Preview window and save the file. 




Sound Editing 

Flash contains a number of editing tools that allow you/ to^ea5l\the actual sound 
wave form and add effects such as fades to sounds. These features allow you to 
fix and fine-tune sounds for your movie, and repurpose the same sounds for dif- 
ferent functions in the movie. /\ 

If you want the edit of a sound to be univefsdsgNall uses of the sound in the 
movie, you would edit the original importea^ousd lTNthe'Library. If, instead, you 
want an edit to only apply to a particular instance of the sound, you would use 
the Property Inspector with a selected sound instanc 

You will edit the Pour sound to eliminate the silence at the beginning and end of 
the sound. In addition, you wilKlywe^hXrrfauye volume of the Calypso music 
so it doesn't overwhelm the Pour sound as vou roll over buttons. In both of these 
cases, you will edit the insta 



TASK 4B-2: 

Editing Sounds 





1. Open 
the So 

Inspect 



istory Button symbol's Timeiine. Click in the Over frame in 

lyer. The sound properties ritenOT? available in the Property 

e Edit Envelope dialog box 




Drag the Time In control to the .25 second mark in the Timeline. Drag 
the Time Out control to the 3.45 second mark in the Timeline. Click the 
Play button to hear the edited sound. 




Click OK. You have edited only this instance of the sou 
imported sound in the Library has not been affected, so if 
instance into the movie, it will not be edited. 

4. Next you will reduce the volume of the Calypso music. In order to do this, 
you need to open the Music movie clip symbol which contains the Calypso 
sound. Open the Music movie clip symbol in the Library to view its 
Timeline. 

5. Click on the first frame of the Timeline. The jS'ouhd settings are now avail^Q <y 
able in the Property Inspector. Click Edit. I V) ) 

6. Drag the left channel envelope handle down until it is approximate 
inch above the zero line. Repeat the same step for the right char 
envelope handle. 




Click the Play button. The sound's volume is now reduced. Click OK. 



Drag the vertical bar as 
shown in the following 
graphic to change the Time 
Out controls. 
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7. Test the movie. The background music volume is now lower, and there is 
no delay in the Pour sound when you move the cursor over the History 
button. 



Close the Preview window. Close and save the 
Advanced Web Navigation file. 




Summary 



In this lesson, you learned to import sounds into your movies and place 
those sounds in the Timeline. You added sounds both to standard animations 
and to button events. In addition, you edited sound length and volume in 
order to fine-tune each sound for your ^r^jg^t^^ 





Lesson Review 

4A If you want a sound to play when the viewer clicks on a button, what do 
you do? 



V 



You need to import 
symbol's Timeline. 




ound, and add it to the Do 




e in the button 



4B How do you lower the volume of a sound in the Timeline? 

Select the frame that contains the sound, ana^ifik the Edit button in the 
Property Inspector. In the Edit Envelope dialog box, drag the envelope 
handles^flown^ S ^N^y^ 
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Testing and Publishing a 
Flash Movie 




Overview 




In this lesson, you will test the download performance of a movie, and will 
identify the ways that you can reduce the file size and resulting download 
times of your project. You will then work with various publishing options tc 
optimize your movie for its intended audience. 




Objectives 



In order to best prepare your Flash movies to be distributed, yo 

5A Evaluate download performance. 

You will test the download performance of a Flash movie and identify 




potential ways to reduce the size of your movi< 




5B 



5C 




Identify ways to reduce file size and download time in your movies 

You will identify the factors that lead to larger file sizes, and how you 
can optimize your movies to reduce^W^izbs^^djawnload times. 

Export and publish Flash movies to prepare them for viewin 
your audience. 




You will use export and publish settings to adjust your movi< 
they are optimized for your target audience. 





ata r-iles 

cunes.fla 

esson Time 

45 minutes 
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movie that is 
ed data has corn- 
continue. 



Evaluating Download Performance 

When a Flash movie is played in the viewer's browser, the Flash Player attempts 
to use the frame rate you set for the movie. However, due to the speed of the 
viewer's computer, and the speed of the viewer's Internet connection, the actual 
frame rate during playback can vary. As you learned before 
downloading reaches a particular frame before the frairw^ s^i 
pletely downloaded, the movie pauses until enough dat^arr 

In an earlier lesson, you built a simple preloader by testingJo^e if a particular 
frame has downloaded. In that case, you specified that all of the frames should 
download before the movie plays. Howeve^thte do&sn'talways need to be the 
case. Many times, the largest content may occur somewhere else in the movie 

By using the Bandwidth Profiler, you can see how much data is sent for each 
frame according to the modem speed you specify. When the Bandwidth Profiler 
simulates the downloading speed, Flash estimates of typical Internet performance 
produced by that speed. This allowk yoci^tVfaimj accurately test the movie You 
should attempt to test your movie at each speed you intend to support, and on 
each computer you intend to support. This allows you to make sure the content 
works well using the slowest connection^ njsd computer it is designed for (i.e. 
without needing to constantly upload it to a Web server) 




In addition, you can have Flash generate a report of frai^esNqi^' are slowing 
playback. This allows ymrtt) see where you can optimizfes^«ur movie to eliminate 
the bottlenecks. ^\ ^\ 




You will now test the Scenes movie in order to check 
problems. In addition, you will check if there aate^rt 
that lead to its increased file size. 





for any potential playback 
m elements in the movie 




Using the Testing Environment 



Open the Scenes.fla file located inside the Flash MX Level 2 Data folder. 




^T 5 ^ 

v ^\2^\You will begin by testifrg^fie movie. Choose Control— >Test Movie. Flash 
^^preates a SWF file, a^Kt^displays the movie in a Preview window. 

As you learned b^^b) when inserting a preloader into a file, when you pre- 
view a movie/ffere-the Flash file located on your local hard disk, the movie 
loads so quickly that you can't tell simply by previewing how playback will 
behave for your viewer who is downloading the file over the Internet. How- 
ever, once you are in the testing environment, you can set a simulated 
download speed and view the movie as it would perform using the selected 
speed. 
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Choose Debug— >56 Kbps. Choose View— >Show Streaming. The movie 
now performs as it would if it were being downloaded using a 56K 
connection. There is a delay between each of the scenes. In this case, you 
would most likely set up a preloader, since the content needs to preload in 
order for uninterrupted playback to occur. 

You can also view a Streaming graph to allow you to see the streaming 
behavior of the movie. This is one tool you can use to isolate areas of the 
movie that are affecting playback. Choose View— >Bandwidth Profiler. 
Choose View— Streaming Graph, if necessary. 



> .,-..„■:.■... 

1 27ZlftC22M» 



* "■■ ■•" 
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The Streaming graph shows where there are potential problems xvilh play 
back will occur. Given the download speed you selecte^ii^dT^pebug^enu, 
the Streaming graph displays how the movie is streaming Eacl/ba/is/a 
frame. Note that the first bar is above the red line. This means that there is 
more data that must be streamed before that frame can actually play back. 
The remainder of the frames are below the red line, indicating that the 
streaming will fairly quickly catch up with playback. However, at around 
frame 97, the streaming bar is above the red line again, indicating an inter- 
ruption in playback. / — ^ N.^^ 



In addition to the Streaming graph, yo 
which allows you to quickly see whic 
which might cause the most problems. _ 
Graph. 






u\e\heJ*rame by Frame grapfSs; 
s contain the most data, arfi^v. 




->Frame by Frg 




In the Frame by Frame graph, if any of the frames extends beyond the red 
streaming line, this indicates that the frame could potentially cause playback 
inteirupticns^ecau^e--tfie entire frame must download before it plays. Note 
that most of the content must load at frame 1 and frame 97. In this case, 
agaift^vbxmight want to create a preloader to make sure that the content in 
frame. 9*Ns leaded before playback begins. Close the Preview window. 
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]Fs extremely important to bk^wMe of the file size of your Flash projects. As the 
size of your file increases, its download time increases, as well. Additionally large 
files often cause playback interruptions, especially if a large object such as a 
plex bitmap or sound^occurs in a particular frame. 



Finally, you can generate a report that summarizes the data size for the final 
Flash Player file. Choose File— >Publish Settings. The Publish Settings dia- 
log box appears. Click on the Flash tab, and check the Generate Size 
Report checkbox. 



PublHh Settings 



7. 



8. 




Click Publish. Flash pu 
ates a size report as a text 



vie using its default settings, and cre- 



You will now open/tWsize report using a program^abc^n view a text file. 
In Windows Explcrer/My Computer, navigate to the 

ata folder, and open the Scenes Reporttxt document 
e and each item is listeff-?rw$e report along with its 
n help you locate tercet-items that you can work 
Close the size report document, and return to 



Flash MX Lev 
to view it. E 

size. Once a; 
with to n 
Flash. 






tion Factor^ 





There are a numbe 
load times to a 




gs you can do to keep file size, and resulting down- 
, and to ensure as much as possible smooth playback. 



Optimizing Files 



Use symbols for every element that appears more than once, and use symbols as 
building blocks for more complex symbols. 
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Use tweened animations instead of frame-by frame animations. Only use frame- 
by-frame animations for effects that can't be produced using a tween. 
Additionally, you can combine tweens with frame-by-frame animations. For 
example, when animating a bird flying, only use a frame-by-frame animation for 
the flapping of the wings. Use a motion tween to have the bird move across the 
Stage. 

Use movie clips instead of graphic symbols for animation. Limit the area of 
change in each keyframe, having the changing contents in each keyframe isolated 
to as small an area as possible. 

Avoid animating bitmap elements. If you need to animate, try tracing the bitmap 
so it is a vector shape. Reserve bitmap images as background or static elements^ 

When adding sounds to your projects use MP3, the smallest sound format, wh^n 
ever possible. 

Optimizing Objects ^ 

Group elements as much as possible. 

Use layers to separate elements that change over the course of the animation fror 
those that do not. Do not put multiple animations in the same laye} 

Use the Modify— >Curves—>Optimize command to minimize 
rate segments and points that identifies a vector shape. 

Limit the number of special line styles. Solid lines require less memory, in addi- 
tion, lines you create with the Pencil tool produce smaller files sizes than lines 
created with brush strokes. /\ f 

Limit the number of fonts and font styles, and avoid using embedded fonts. 
Remember that you can break apart text and treat it'afLvector objects. If you do 
embed fonts, select only the characters you are actually using in the movie 
instead of including the entire font. 







Optimizing Colors 




Use the Color menu in the Property Inspector to create many instances of a single 
symbol in different colors instead of creating separate symbols only to change the 
color. 

Use the Color Mixer to match the color palette of the movie to a^owser-specific 
palette. 



Topic 5C 







Exporting and Publishing Movi 



In order for your audience to be able to view your Flash movie, you must convert 
your native Flash file into a file type that your audience can view. The two ways 
to do this in Flashis tbselther export your movie or publish it. While both meth- 
ods allow ysu t& create the same types of files, you choose whether to export or 
publish geh^ratfy^yased on your workflow. 
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Exporting vs Publishing 



When you export a movie, the resulting file stands alone. When you publish a 
movie, the resulting file is usually combined with an HTML page that includes 
the exported file. Because publishing integrates your movie with an HTML page, 
you have additional distribution options for your movie beyond those available 
when you export. For example, publishing a movie lets you generate a page that 
not only contains the movie, but also contains code to check whether the viewer 
has the Flash Player installed, and to play an alternate version of the movie that 
doesn't require the Flash Player. 





Publishing a Movie 

When you publish a Flash movie, you need to folloXto'YH^fn steps. First, you 
use the Publish Settings command to select publishing file formats and file format 
settings. Next you publish the Flash document using the Publish command. 

The options you choose in the Publish Settings diaiog box control the files that 
the Publish command creates. Using the Formats tab in the Publish Settings dia- 
log box, you can have Flash pub^h the^Fladi/mpvie file (SWF), the companion 
HTML file, or alternate image/ in a Variety of formats that appear automatically 
when the Flash Player is not available (GIF, JPEG, PNG, and QuickTime). 

You can also have Flash create stand-alone projector files for both Windows and 
Macintosh systems, and QuickTime^vjdeios from Flash mora 



You will now choose the 
you publish the Scenes 



TASK 5C 

Selecti 





ort formats that you want^ 



Formats 




generate when 



When you prepare to publish a Flash movie, you should first save the Flash 
in the folder where you wara^tFte) published files to appear. Flash auto- 
tically places the published files in the same folder as the original Flash 
movie. You want the published files to appear in the Website folder, you will 
firSt-saye the file there. Choose File— >Save As. Save the Scenes.fla file 
inside the Website foldikj) 

hoose File— >Publish Settings. The Publish Setting dialog box appears. 





You want Flash to create both the Flash (SWF) file, along with the compan- 
ion HTML file. Click the Formats tab, if necessary. Make sure that the 
Flash and HTML checkboxes are checked. 



named Scenes, each of the file names use that same 
should name all files that will be used on the Web 
characters. 




4. Uncheck the Use Default Names checkbox 

5. Type scenes.swf in the Flash file na 

6. Type scenes.html in the HTML file name 



matt 

fwmtt 





Ffcm 






EFV»h |mQ 
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«ew / 












□ Qu«*T«!»|««l ^ 




« mow 













At this point, if you clicked Publish, Flash would generate the SWF and 
HTML files. If you clicked OK, Flash would save the publish settings, asso- 
ciating them with the file, but would not yet generate the exported files. 



You can enter a path with the 
filename to specify where 
you want to publish the file, 
if you want it to be different 
than the default location. You 
can set a different path for 
each file format (for example, 
if you want to publish the 
Flash SWF file in one 
location and the HTML file in 
another location). In 
Windows, use backslashes 
(\) to specify the directory- 
folder-file hierarchy. On the 
Macintosh, use colons (:). 
Specify the drive name for an 
absolute path. In Windows, 
use ..\ to indicate the path to 
the hard drive. 
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Flash Movie Publish Settings 

When you publish a Flash movie, the Flash tab in the Publish Settings dialog box 
allows you to set the properties of the exported SWF file. 

The Version drop-down list allows you to select the version of the Flash Player 
that you will output the movie for. If you select Flash Player 6yffie v viewer may 
need that version of the Flash Player installed to view the movie. Many times, it 
may be better to select an earlier version unless there are Flash 6-specific fea- 
tures that you need for the movie. \N^> 

The Load order drop-down list allows you to set the oraeinnVhrch Flash loads a 
movie's layers for displaying the first frame of ytfur mmde^The Bottom Up 
option has the bottom layer load first, and the Top Down option has the top layer 
load first. /^^>^V^\ 

Checking the Generate Size Report checkbox will have Flash generate a report 
listing the amount of data in the final FlasrrmoVie bysfil^ 



Checking the Protect from Import checl 
Flash movie and converting it back into 



rev ants >3thers from importing the 
^A) document. 



When you select the Flash Play/r^ opfto^nHn_£he) Version drop-down list, the 
Compress Movie checkbox appears. The Compress Movie option automatically 
compresses the Flash movie/to %%A/&c& file/>fee and download time. This option is 
on by default and is most beneficial when a file has a lot of text or ActionScript. 
A compressed file only plays in Flash Player 6. 



Flash automatically uses 
in your exported file. T< 
ity slider or enter a value 
image quality, but 
files. You often n 






G compression to reduce th^i^BOof bitmap images 
bitmap compression, yjeftK^djust the JPEG Qual- 
ing the slider furme^fiHhe left reduces the 
smaller files. Higher image quality produces larger 
iment to find the best value. 

To set the sample rate and compression for a)l stream sounds or event sounds in 
the movie, cttejc the^Set button next to Audj^S^gm or Audio Event and choose 
options for Compression, Bit Rate, and Quality in the Sound Settings dialog box. 

If you cl4c(^thesCyerride Sound SettiHj^aj^ckbox, you can override settings for 
individual sounds selected in the Sound section of the Property Inspector. If you 
don't select the Select Override Sound Settings option, Flash scans all stream 
sounds in the movie (including sounds m imported video) and publishes all 
Leahv^Wrip at the highest ind^vra^al setting. This can increase file size, if one 
e stream sounds has a high export setting. 
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TASK 5C-2: 

Choosing Publish Settings for a Flash Movie 

1. Click the Flash tab in the Publish Settings dialog box to view the Flash 
settings. 




Fl»* MTML| 

load Ore* Bohm.1* v 



[ ] Protect honv vnport 
DOm* Trace acton: 

EjCoapwuMova 



JPCG QuaWy ^ 80 
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AurJoSliMm MP! 1 6 Wp. Moro fl«"l 
AuctoEvw* MP3 16U*n Mono (!*) 
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2. Check the Generate Size Report checkbox, if necessary, to generate a 
size report. 

3. Check the Protect from Import checkbox. 

4. You will set the quality for event sound^jaick/Set^lext to the Event 
Audio setting. The Sound settings dialog box appeals. 




5. You will reduce the sound's bit rate to half oTtts^original. Choose 
from the Bit Rate drop-down list ( ( 





bps 



Click OK. Yov^r^^^^o\he Publish Setting|^^rg box. 



HTML Publish Settings 





In order to play a Flash movie in a Web browser, you need to place it in an 
HTML document that activates the movie and specifies browser settings. While 
you can use an external Web page editor to build an HTML page and embed a 
SWF file, the HTML option in the Publish Settings dialog box generates an 
HTML document automatically using the parameters selected in the HTML tab. 
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Template Settings 



The Template drop-down list allows you to select an HTML template that is used 
to generate the companion HTML page. You can click the Info button to the right 
of the Template drop-down list to view a description of the selected template. 

Dimensions Settings 

You use the Dimensions drop-down list to select a dimensions option for the 
Flash movie within the HTML page. The Match Movie optionSise^the size of 
the movie you specified in the Document Settings dialog boxTlOouy select the 
Pixels or Percent option, you can set the values of the wi/atliNand height 
attributes in the <ob ject> and <embed> tags in the HTML pa'^e. 

Playback Settings 

You can use the Playback options to contoo^hcHjNheNqpvie plays within the 
browser window. The Paused at Start option pauses m^jjlovie until a user clicks 
a button in the movie or chooses Play from the shortcut menu. By default, the 
option is deselected and the movie begins to plav as soon as it is loaded. 

The Loop option repeats the movie whbn^trea^Ws the last frame. You should 
deselect this option to stop the movie when it reaches the last frame. 



The Display Menu option displays 
dows) or [Ctrl] -click (Macinti 
About Flash appears in the shortc 




ut menu when users right-click (Win- 

If you deselect this option, only 
By default, this/^ption is selected. 

The Device Font option Wolks for Windows machines ta^txjs'dcute anti-aliased 
(smooth-edged) system ^wit^for fonts not installed on^ro^er's system. Using 
device fonts increases the legibility of type at small sizes and can decrease the 
movie's file size. Thls^o^km^snly affects movies pentSining static text (text that 
you created when authoring a movie and that do&(noj)change when the movie is 
displayed) set^to^l^pla^^^ device fonts. 

Quality StfttiW^ 

The Quality setting determines the trade-off between processing time and apply- 
ing anti-aliasing to smooth each frame before it is displayed on the viewer's 
screen, as follows. The Low setting^qSe^pot use anti-aliasing, and is the fastest 

opticW^^N. 

T^b < e N A4ito)jpw option makes speed a priority but improves appearance whenever 
possible. With the Auto Low option, playback of the movie begins with anti- 
iasing turned off. If the Flash Player detects that the processor can handle it, 
ti-aliasing is turned on.<^= 

Auto High option emphasizes playback speed and appearance equally at first 
but sacrifices appearance for playback speed if necessary. Playback begins with 
anti-aliasing turned on. If the actual frame rate drops below the specified frame 
rate, anti-aliasing is turned off to improve playback speed. Use this setting to 
emulate the View— >Antialias setting in Flash. 

The Medium applies some anti-aliasing, but does not smooth bitmaps. It produces 
a better quality than the Low setting, but lower quality than the High setting. 

The default Height setting favors appearance over playback speed and always 
uses anti-aliasing. If the movie does not contain animation, bitmaps are 
smoothed; if the movie has animation, bitmaps are not smoothed. 



The Best setting provides the best display quality and does not consider playback 
speed at all. All output is anti-aliased and bitmaps are always smoothed. 

Window Mode Settings 

The Window Mode setting for transparency, positioning, and layering only works 
for the Windows version of Internet Explorer 4.0 or higher with the Flash 
ActiveX control. Therefore, unless your primary audience is using a Windows 
machine with a later version of Explorer installed, it might not be best to design 
your movies in such a way that the options in the Window Mode setting are 
critical. 

HTML Alignment Settings 

The HTML Alignment settings position the Flash movie window within the 
browser window. The Default setting centers the movie in the browser windo 
and crops the edges of the movie if the browser window is smaller than toe, 
movie. /s 

The Left, Right, Top or Bottom setting aligns movies along the corresp< 
edge of the browser window and crops the remaining three sides of th 
needed. 

Scale Settings 

The Scale settings allow you to place the movie within speci 
you've changed the movie's original width and height. The Scale 
scale parameter in the <ob ject> and <embed> tags^/v 

The Default (Show All) setting displays the entire movie in the specified area 
without distortion while maintaining the original aspect ratio of the movies. Bor 
ders may appear on two sides of the movie. 

The No Border setting scales the movie to fill the 
movie's original aspect ratio without distortion, ero 





The Exact Fit setting displays the entire 
serving the original aspect ratio, which 



The No Scale setting prevents the movie 
dow is resized. 



Flash Alignment Settings 

The Flash Alignment settings eont 
window and how it is c 
eter of the <ob ject> 
Left, Center, or Right. F< 



The Show Warning 
conflict. 





ea and keeps the 
needed. 



he^becified area withoj4<Q&)e 
ortion of the movi^Ss 



ng when the Flas 




wm- 



he movie is placed within the movie 
ecessary. This option seK^Kre--s align param- 
tags. For Horizontal alignment, choose 
ignment, choose Top, Center, or Bottom. 



option displays error 




s if tag settings 
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TASK 5C-3: 

Choosing HTML Settings for a Flash Movie 

1. Click the HTML tab in the Publish Settings dialog box. 




n Paused A»Sla« F] Display Menu 
0loop □0«vo»Fonl 



WndowModr Wn *m 
HTML A 



Seal. DeiaullShiwall v 
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2. 



3. 



Choose Detect for Flash 6 from the Template drop-down list, and click 
Info. The description the template appears. 

You will now need to create an alternate image ^^tejEbat the template will 
display if the Flash 6 Player is not detected. Click the Formats tab, and 
check the JPEG image checkbox. Name the JPEG image scenes.jpg. 
Click the HTML tab once again. 

the Loop checkbox. 




You have completed the Publish settings. 
5. Click OK. The Publish settings are retained with the document. 



(Windows) 



6. Choose File— >PubIish. Flash publishes all of the files you specified. 



7. View the scenes.html page inside the Website folder inside the 
Flash MX Level 2 Data folder in your Web browser. 



Summary 




In this lesson, you learned how to test a movie to determine its download 
performance and pinpoint potential playback problems. You also learned 
numerous ways to reduce the size of your files to minimize download time. 
Finally, you worked with a number of Publish settings to prepare your 
native Flash files for viewing by your audience. 



Lesson Review 




5A In order to view the movie as it would look as if it were downloading, 
what do you need to do? 





You need to choose the View^Show Streaming command. 

5B You should put all animations in the same layer/t^educe file size. 

False. Placing multiple animations in the same layermcre^ses file size and 
reduces performance. / ^~\\ 

5C If you want to name a published file i 
Flash file, what do you need to do? 

You need to uncheck the Use Default 
the Publish settings dialog box. 
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GLOSSARY 





button symbol 

A symbol that contains four frames allow- 
ing you to create buttons with visible 
changes as the user interacts with them. 

graphic symbol 

A symbol best used for static images and 
animations that are dependent on the main 
movie Timeline. 

instance 

A copy of a symbol, which doesn't add to 
file size and is linked to its parent symbol. 

movie clip symbol 

A symbol best used for animations that are 
independent of the main movie Timeline. 

symbol 

A "building block" of Flash content. Sym- 
bols are the master objects within a Flash 
movie. The three types are graphic, movie 
clip, and button symbols. 
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animated button states, 22-24 

B 

button events, 47-52 
button symbols, 3 
creating, 19-22 



Document Library, 25-27 
download performance, 76-78 



expanding menus, 59-62 
exporting movies, 80 
external movies 
loading, 42-45 



graphic symbols, 2, 4-8 



I 

instances, 3 
creating, 24-25 



labels 

adding labels to a Timeline, 37 

M 

movie clip symbols, 3 
combining, 11-14 
creating, 8-11 
nesting, 17-19 



optimiaqe \^ s v 
colors, 79^v 
files, 78 
objects, 79 



playback controls, 40 
preloaders 

creating, 63-66 
publishing movies, 80 

dimensions settings, 84 

Flash Alignment settings, 85 

Flash settings, 82-83 

HTML Alignment settings, 85 

HTML publish settings, 83-87 

playback settings, 84 

quality settings, 84 

scale settings, 85 

template settings, 8 

window mode settin 



remote rollovers, 52-58 




es, 69-70 
, 70-72 
Itrag; 72-74 
vejjt sounds, 70-72 
importing, 68-69 
treaming sounds, 
Symbol Library, 2 ( 
symbols, 2 
button symb 
duplicati 
graphic 
instances, 3 

movie clip symbols, 3, 8-11 
swapping, 30-33 

w 

Web navigation controls, 45-47 





s, 2, 4-8 
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